Posted on

WooCommerce: Disable Zoom, Gallery Slider & Lightbox @ Single Product

Sometimes, cool things don’t apply to certain businesses. Also, keeping the default WooCommerce behaviour might slow down your website, should you not need to use a specific functionality.

For example, I’m talking about the new “Featured Image Zoom”, introduced by WooCommerce a couple of updates ago. What if your customers don’t need this? How can you disable it?

Well, as usual, this can be done with a few PHP lines! Now go and disable all the stuff you don’t need πŸ™‚

Disable zoom, gallery and lightbox @ WooCommerce Single Product Page

/**
 * @snippet       Remove Zoom, Gallery @ Single Product Page
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=72911
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.1.2
 */

add_action( 'after_setup_theme', 'bbloomer_remove_zoom_lightbox_theme_support', 99 );

function bbloomer_remove_zoom_lightbox_theme_support() { 
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' );
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

14 thoughts on “WooCommerce: Disable Zoom, Gallery Slider & Lightbox @ Single Product

  1. Thanks; worked as expected!! Very helpful!

    1. Thank you Katie πŸ™‚

  2. Thank you! Is there a simple way to display the image caption below the image… the way it shows in the lightbox?
    I don’t need the zoom/lightbox feature but would like a caption for each image when selected from the slider.
    Tania

    1. Tania – thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  3. I use the Simple CSS plugin and your code works great with that
    Thanks!

    1. Cool πŸ™‚

  4. Thank you for this snippet! I have tested this code with Divi theme, WooCommerce 3.3.5 and a WordPress-friendly hosting on PHP 7.0.27.

    1. Thank you Noelle πŸ™‚

  5. I just noticed that zoom/slider and lightbox has been removed by default. Here is a good blog post that talks about the Gallery feature in WooCommerce.
    https://woocommerce.wordpress.com/2017/02/28/adding-support-for-woocommerce-2-7s-new-gallery-feature-to-your-theme/

    I have been searching and experimenting with ways to make the single featured product image non clickable and found out that this CSS solution works:

    /* Makes the featured single product image not clickable by changing the pointer. */
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
        pointer-events: none;
    }
    
    1. Thanks so much for your input Paal πŸ™‚

  6. Thanks! It works great!
    How do we also make it non clickable? As clicking it right now shows it like a regular clickable image that links to the media file.

    1. Hey Paal πŸ™‚ You would need to find in the WooCommerce templates where the image link is added, and after that use a provided filter (if any) to remove such a href. Hope this helps a little πŸ™‚

  7. We actually wrapped something like this into a plugin because we got so many requests for it πŸ™‚
    https://wordpress.org/plugins/woo-product-image-gallery-options/

    1. Cool Colm, thanks for that πŸ™‚

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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.