Product Image Lightbox Broken WooCommerce 3.0

I recently upgraded several ecommerce sites and ended up with Product Image Lightbox Broken WooCommerce 3.0. The following tutorial explains how to fix the problem.

When I say the product image lightbox is broken in WooCommerce 3.x, I mean this: when you click on a product image on the product page, it opens in a new page instead of displaying the image in a lightbox on the product page.

Also, if you have a product slideshow, all the images display at once.

How to Fix Product Image Lightbox Broken WooCommerce 3.0

1. Open the functions.php file for your WordPress theme.
   For example: /wp-content/themes/your-theme/functions.php
   Note: If you are not using a child theme, then you should create one. If you don’t use a child theme, the code changes this tutorial will be overwritten if you update your theme.
2. Insert the following code at the end of the functions.php file:

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

   You can delete any theme support functions you don’t want to use; for example, you can delete line 1, wc-product-gallery-zoom, if you don’t want the product zoom feature.

3. Save the functions.php file and then test the product pages to verify that the WooCommerce product lightbox and slideshow are working.
4. IMPORTANT: If you use the wc-product-gallery-zoom feature, then the lightbox feature doesn’t work when you click the image; instead, you have to click the magnifying glass icon on the image. If you want the lightbox feature to work when you click the image, disable the wc-product-gallery-zoom feature.

You might also be interested in:

• How to Manually Sort WooCommerce Products
• How to Change the number of WooCommerce Products Per Row and Page