InterSet Ltd

WooCommerce Product Gallery Vertical for Astra and GeneratePress

woocommerce product gallery vertical

Share Now:

Share on facebook
Share on linkedin
Share on twitter
Share on email
5 1 vote
Article Rating

Today’s challenge has been on the top of my to-write list for a while. And thanks to one of InterSet’s subscribers, I finally decided to post a quick tutorial. Here’s how to align the “Product Gallery” thumbnails for WooCommerce Product Gallery Vertical show to the side of the main Single Product Page image, no matter the device.

How to fix WooCommerce Product Gallery Vertical ?

.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;
}

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

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.4+.

If you think this code saved you time & money, feel free to join 10,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Interset Limited supporters for 365 days of WooCommerce benefits. Thank you in advance 🙂

5 1 vote
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

Get Free Access to InterSet’s 1 GB SSD Hosting with Website Design


Know Your

interset app coming soon

More You Would be interested in . . .

Have you any Question ?
Ask us !

0
Would love your thoughts, please comment.x
()
x