[Resolved] woocommerce product gallery vertical

[chete]

Hello,

It is possible with GP + Woo to put the gallery of the product in vertical to the left of the featured image ?

Regards

[Tom]

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/

[chete]

Hi Tom
Ok thanks, works well
Regards

[Tom]

You’re welcome 🙂

[Sam]

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

[Leo]

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 🙂

[Sam]

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

[Leo]

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.

[Author]

Posts