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
- 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.
- 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.
- Save the functions.php file and then test the product pages to verify that the WooCommerce product lightbox and slideshow are working.
- 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: