Product gallery vertical

Hi there,

Looks like both pages are working to me?
https://www.screencast.com/t/CTwQYkEzqF6
https://www.screencast.com/t/P2B9VvSn

Am I missing something here?

Hi, please compare this: https://www.supereight.net/shop/adidas-busenitz-pro-shoes-beige-collegiate-burgundy-clear-mint/

to this: https://www.supereight.net/shop/dc-shoes-granline-polo-s-s-t-shirt-snow-white/

the thumbnails are different sizes.

Hi there,

try this - find this CSS and add the property that i have commented:

.woocommerce-product-gallery .flex-control-thumbs {
    -webkit-box-ordinal-group: -9;
        -ms-flex-order: -10;
            order: -10;
    /* Add the following property */
    min-width: 100px;
}

Hi David, thanks that is awesome, seems to have done the trick!

Glad to be of help.

Hi Guys, I am coming back to this as I have an issue I cannot solve. I still use this code for the vertical thumbs on the product gallery. Generally, it works completely fine but sometimes (usually on simple products) the viewport is slightly small so you can see part of the second image. I have included a screenshot in the private section.

This corrects itself if you resize the browser slightly and does not happen on Mobile. I can only assume it has something to do with moving the thumbs to the left so they are vertical.

Any ideas why?

As a side note, would it be easy to recreate this layout for the product images instead?

https://www.nike.com/gb/t/wildhorse-7-trail-running-shoe-jG4fdL/CZ1856-700

Thanks
Sam

Hi there,

The issue with it is the Woo Gallery was never designed for a vertical nav. It messes up the container width which the size of the image is calculated on.

Unfortunately there is no fix for it - I've confirmed this with David :)

Hi Leo, right I see. so I need to stop using the vertical thumbs then?

What are your thoughts on the gallery-like Nike does it?

The Nike gallery is very different from Woocommerce's gallery structure.

There might be some plugins can help achieve that layout.