Woocommerce 3 product thumbnail sizes

Support
#1

Hi,
First of all, thank you for your continuous great work on the template X!

I just updated from v4.6.4 to v5.1.0 and everything went smooth and well.
After the major update of woocommerce 3, the image gallery has changed, now i need to customize the look of the gallery.
I didn’t find any settings on the thumbnail size or layout just two lines of css (on other forum post):
.single-product .flex-control-nav { position: static; }
.single-product .flex-control-nav li { float: left; }

that helped to move the thumbnails from the image to the bottom.
Can you provide any other custom css where i can change the thumbnail size and/or layout on the single product page (with main classes: woocommerce-product-gallery woocommerce-product-gallery–with-images woocommerce-product-gallery–columns-4 images).
I changed the thumbnail size to 120x120 and regenerated the images but all thumnails remain very small (24x24px in actual size and in the css integrity-light.css sized like height: 1.5em;)

I’m want to make the thumbnails about 75px and in 5 columns.

PS: after some reading in other forum posts i created css:

.single-product .woocommerce-product-gallery__image>a>img {
width:100%;
}

.single-product .flex-control-nav.flex-control-thumbs li {
float: left;
width: 15%;
margin-bottom: 8px;
}

.single-product .flex-control-nav.flex-control-thumbs li:nth-child(7), .single-product .flex-control-nav.flex-control-thumbs li:nth-child(13) {
margin-left: 0 !important;
}

.single-product .flex-control-nav.flex-control-thumbs img {
width: 100%;
height: auto;
}

.single-product .flex-control-nav.flex-control-thumbs {
position: relative;
padding-left: 0;
padding-right: 0;
padding-top:8px;
}

but still need better customization for smoother look, like thumbnail border, … etc.

Any help would appreciated,
Newman

#2

Hi Newman,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Hi Jade, and thank you for your reply.
I added a secured note with the link of my website to my original post-question.
Please take a look and let me know if any customization is applicable to my page.
Regards, Newman

#4

Hi,

You may change the code that reads.

.single-product .flex-control-nav.flex-control-thumbs li {
    float: left;
    width: 15%;
    margin-bottom: 8px;
}

with this

.single-product .flex-control-nav.flex-control-thumbs li {
    float: left;
    width: 18.6%;
    margin-bottom: 8px;
    padding: 3px;
    background: transparent;
    border: 1px solid #eee;
    margin-left: 0;
    margin-right: 0.5em;
}

.single-product .flex-control-nav.flex-control-thumbs li:nth-child(5n+5) {
    margin-right: 0 !important;
}

Hope that helps.

2 Likes
#5

I know it’s an old thread, but I just want to chime in and say thanks, great solution - works perfectly! And all the code needed is here.

Cheers!

#6

You’re welcome. Please just note though that all custom codes here in the forum serve only as guides. We do not maintain them so in case the code breaks your site in the future, you’ll need to forward the code to a third party developer as fixing custom code and further enhancements are not a part of our product support.