[Support request] Amount of woocommerce thumbnails

[Alberto]

Hi. I have several photos to show for each woocommerce product and I need the gallery to show me more than 4 thumbnails.

If I configure more than 4 images, I get 4 to be shown in a row and the others in a row below, even though there is space to show a fifth thumbnail in the first row.

How can I show 5 thumbnails instead of 4 for each row in the gallery?

Thank you.

[David]

Hi there,

try adding this CSS:

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 20%;
}
.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;
}

[Alberto]

David,

Unfortunately it doesn’t work …

[David]

Any chance you can remove the coming soon so i can take a look?

[Alberto]

David.

You can use these access data:

User: generatepress
Pass: generatepress

[David]

Try the updated CSS here

[Alberto]

David.

It worked perfectly, thanks!

One last question: will there be any way to focus the gallery? It is currently aligned to the left …

Thank you in advance.

[David]

Hmmm… you can try this CSS to push the thumbs apart:

.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

Unfortunately woo fixed the thumbs to 100px in size, so if we increase the image size to fill the space the images become blurry.

[Inaki]

This post was very usefull for me also. Incredible support. Thanks!

[David]

Glad to hear that you found it of use!

[Author]

Posts