YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar diana.soijo.tap asked

Woocommerce gallery fix after update 3.0.0


I had an issue with the thumbnails after updating to woocommerce 3.0.0.

WooCommerce 3.0 and the new gallery features

WooCommerce 3.0 introduced some pretty cool new features specifically for your WooCommerce photos including:

Image zoom / magnification built right into core – no need for any third party plugins for zoom functionality anymore!
Lightbox – brand new and much-improved image on the old one.
Slider – yip – no need for any advanced third party plugins for a nice slider for your photo gallery.
These are pretty big changes to how product images get presented in WooCommerce. Over the past few years, many third party extensions have become quite popular to address the previous shortcomings in core WooCommerce. For this reason, the WooCommerce team made the call to not enable the new gallery features by default.

Add this to your functions.php |(only if your used to php code)

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

Then update your CSS in "Extra CSS" of the customizer -->change colors in CSS to fit your template
/* WooCommerce 3.0 Gallery */

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em

.woocommerce-product-gallery figure {
margin: 0

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1

.woocommerce-product-gallery img {
display: block

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%

.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;

a.woocommerce-product-gallery__trigger {
text-decoration: none;

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;

  • WordPress
  • Tutorial
  • YOOtheme Pro


5 Answers


Avatar hendrik Yootheme answered


the latest versions of YOOtheme Pro and Warp 7 include the fixes for the Woocommerce 3.x product gallery.
Please update to the latest versions to fix the issue.

I think it was a caching issue, it all looks well on your website from my point.




Avatar wicho.saenz answered

I test you code PHP and CSS and is working! Is working!!!!
I have Edge Template with WARP 7.

Thanks so much!!! I will update my Woocommerce 3.0.1


Avatar pierre.vanwinsberghe answered

Hello Yootheme team
The solution given by @hendrik didn't fix the problem.

I've updated the Lykka Theme to version 1.0.7 and Warp Framework to 7.3.33.
My WordPress is version 4.7.4 and WooCommerce has been updated to 3.0.4

But I still have problems with the thumbnails display. All product images are same size, displayed in a column.

Please let me know how to solve this.
Thank you

I've found old remaining php files forgotten by W3 Super Cache in wp-content/ while uninstalling.
Deleting them solved my problem.



Avatar ferentis answered

@hendrik and others: I fixed the problem by recompiling LESS for the new template. Sorry to bother....

Know someone who can answer? Share a link to this question via email or twitter.