Browse By

How to fix WooCommerce 3.0 upgrade lightbox and photo gallery errors

So you just updated the WooCommerce plugin to 3.0 and have now realized that on your product page the lightbox feature is broken and your gallery does not display in the right format. Click on the links below to jump straight to fix the error you have on your WordPress product page.

Fix The Lightbox Error >>

Fix The Gallery Images Error>>

Fix WooCommerce 3.0 upgrade lightbox and photo gallery errors

WooCommerce 3.0 New Features

The new 3.0 update comes with enhanced features:

We may earn a small commision at no extra cost to you if you sign up.

  1. Image Zoom/Magnification ability – a new standard feature without need for installing a 3rd party plugin.
  2. Lightbox – An improved lightbox with a slider feature and full screen ability.
  3. Slider – Users can now slide through all your product images without you having to install a 3rd party plugin.

Some Advice

Now, it goes without saying, always backup before you make plugin or theme updates and most importantly, make major changes on a development site before doing it on alive one to avoid huge mistakes!

Fix Lightbox Error

In order to fix the lightbox error, you need to add support for the new WooCommerce 3.0 gallery features. It is a simple process, just go over to your functions.php file and add the following lines of code at the end.

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' );
}

As always, backup before you make changes to any theme files. Once you have added that, you should have your lightbox working like a charm.

If this does not solve your problem, it is likely that your theme has cleared the CSS used to style your page but not to worry, I’ve got you!

Fix The Gallery Images Error

In order to display your gallery and lightbox triggers properly, you should add the following CSS to your child theme’s CSS, which you should be using, as it is good practice.

/* 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
width: 70px;
}

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

You would probably need to play around with the .flex-control elements to suit your needs but you should be all set from here!

Shout out to WooCommerce for a great plugin update once again and big ups to Create & Code who published this solution earlier this year.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *