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 🙂
