woocommerce product gallery vertical

Hi there,

Something like this might help:

.woocommerce-product-gallery {
    display: flex;
}

.woocommerce-product-gallery .flex-control-thumbs {
    order: -10;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
    padding-top: 0;
    padding-bottom: 5px;
}

Depending on your browser compatibility needs, you may want to run that code through this tool: https://autoprefixer.github.io/

Hi Tom
Ok thanks, works well
Regards

You're welcome :)

Hi, this is an awesome little trick. Is there any way of changing the size of the thumbnails as they are quite small? I tried changing the size of the containing div but it didn't seem to work very well.

Thanks
Sam

Does this help?
https://iconicwp.com/blog/manage-woocommerce-product-image-sizes-3-3/

If not any chance you can open a new topic?

Thanks :)

Hi Leo, I am not sure why it makes sense to start a new topic as it relates directly to this thread? I used the code above provided by Tom to move the gallery thumbs for the product page to the left of the main picture. I now would like to resize those thumbs as the code Tom provided makes them smaller than before. Does that make sense?

thanks
Sam

Have you tried the options in the customizer as suggested in the linked article?

The thumbnail size is actually controlled by WooCommerce itself with those options in the customizer.