InterSet Ltd

WooCommerce Product Gallery Vertical for Astra and GeneratePress

Warning: Trying to access array offset on value of type bool in /var/www/vhosts/ on line 38
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:

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
Notify of
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 !

Would love your thoughts, please comment.x