Home › Forums › Trusted › Change the size of thumbnails products › Reply To: Change the size of thumbnails products
July 29, 2018 at 7:40 pm
#5323
Andy
Keymaster
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.