[Theme: StoreFront] How to adjust size of Product Thumbnail on StoreFro WooThmes

  • Hi

    I want to change the number of “Product Thumbnails” on StoreFront from 4x per row to just 2x. Then I want to increase the picture size of those Product Thumbnails. I have tried to adjust the woocommerce style since that seems to be in charge of the size of these – and not the syle.css as nothing happens if I edit there.

    Site: https://classiccarssouth.se
    Direct URL: https://www.classiccarssouth.se/produkt/cadillac-coupe-deville-1959/
    Picture: https://i.imgur.com/BHkEHsz.jpg

    With below code, I can adjust all but the space between the product thumbnails will also increase, and I just want the picture size to be bigger and change to 2x thumbnails per row.

    I also want to point out that I have regenerated Thumbnails and I have changed the size to 350px for these, so thats not the case here. 

    .woocommerce div.product div.images,.woocommerce-page div.product div.images,.woocommerce #content div.product div.images,.woocommerce-page #content div.product div.images{width:300px;}

.woocommerce .related ul.products li.product img,.woocommerce-page .related ul.products li.product img,.woocommerce .upsells.products ul.products li.product img,.woocommerce-page .upsells.products ul.products li.product img,.woocommerce .related ul li.product img,.woocommerce-page .related ul li.product img,.woocommerce .upsells.products ul li.product img,.woocommerce-page .upsells.products ul li.product img{width:100px;height:auto;margin-right:0px;}

.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:300px;}
Viewing 1 replies (of 1 total)

  • hey @rasmuspersson1000,

    You have to use a code snippet to make the the thumbnails to display only 2 products per row.

    You have to paste this snippet on the functions.php of your child theme, if you are using one. If you dont have a child theme, use the plugin “”my custom functions”” and paste the code snippet there.

    add_action('init','woa_thumb_cols');
function woa_thumb_cols(){
        add_filter ( 'woocommerce_product_thumbnails_columns', 'xx_thumb_cols' );
}
function xx_thumb_cols() {
     return 2; // .last class applied to every 2nd thumbnail
 }

    Then use this css code in your style.css to adjust the sizes of the thumbnails:

    @media (min-width: 768px){
  .single-product div.product .images .thumbnails a.zoom {
      width: 48%;
      margin-right: 1%;
   }
}

    hope this helps!

Viewing 1 replies (of 1 total)
  • The topic ‘[Theme: StoreFront] How to adjust size of Product Thumbnail on StoreFro WooThmes’ is closed to new replies.