• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

WooCommerce 3.x product slideshow broken

Product Image Lightbox Broken WooCommerce 3.0

April 17, 2017 by Pat Fortino

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.

WooCommerce 3.x broken product image lightbox

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

WooCommerce 3.x product slideshow broken

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

Filed Under: WooCommerce, Wordpress How To Leave a Comment

Previous Post: « Add USPS Shipping to WooCommerce
Next Post: WooCommerce Terms and Conditions Example »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...