Change the size of thumbnails products

[jreges]

Hi,

 

Can I change the size of thumbnails on product page?

[Andy]

This is the standard CSS styling that controls the size of these product gallery images:

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 22.9375%;
    margin-right: 2.75%;
    margin-bottom: 2.75%;
}
.woocommerce div.product div.images .flex-control-thumbs li:nth-child(4n) {
    margin-right: 0;
}
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
    clear: left;
}

So you could for example use something like this CSS added to Customize > Additional CSS:

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 20%;
    margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
    clear: none;
}
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(5n+1) {
    clear: left;
}

this would put 5 images per row with no gaps between the images.

If you need something more specific or with gaps between the images, please let me know.

[jreges]

Hi,

 

That`s work fine for me. Thanks a lot!  😉

[Author]

Posts