disable zoom woocommerce, Disable zoom effect and Lightbox on featured image for WooCommerce products
disable zoom woocommerce, Disable zoom effect and Lightbox on featured image for WooCommerce products

Disable zoom effect and Lightbox on featured image for WooCommerce products

Recently we had a customization request from one of the users to disable both zoom effect and the image lightbox on the featured image for WooCommerce products. Bellow, we will add and explain some code that will disable these features.

The first thing before even thinking of messing with the code you should check if your theme already has the option to disable these features. So check both the Customizer and Theme Options (for premium themes).

If not, let’s get started with fixing this ourselves.

What we are gonna do is disable clicking on the product image and therefor disable the lightbox and for the zooming effect, we’re gonna add a function to disable the zooming effect for featured images on WooCommerce products.

Disable Product Lightbox

To be honest, we’re not gonna “disable” product lightbox, because that would mean that we have to edit the theme code and then this snippet would not work for all themes. Instead, we’re gonna add some CSS code to the theme in order to make the image unclickable so no lightbox is triggered.

The important thing that should be done is correctly identifying the code for the featured image/gallery images. The easiest way to do that is simply right click on the image and click on the “Inspect Element“.

disable zoom woocommerce, Disable zoom effect and Lightbox on featured image for WooCommerce products

Make sure you select the correct element! If you don’t select the right element, the code won’t work.

After you have identified the right element, navigate to your child theme’s style by going to Appearance > Theme Editor and choose the style.css file.

add the following code to your element:

      pointer-events: none;
     cursor: default;

in our case the element was:

 .box-inner-p .product .woocommerce-product-gallery

so the snippet looks like this:

 .box-inner-p .product .woocommerce-product-gallery{
pointer-events: none;
cursor: default;
}
disable zoom woocommerce, Disable zoom effect and Lightbox on featured image for WooCommerce products

Disable the Zoom Effect

To disable the zoom effect in WooCommerce product images we’re gonna add a custom function to the theme. First navigate to Appearance > Theme Editor and choose the functions.php file.

add the following code after the <?php tag and update file.

function remove_image_zoom_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );
disable zoom woocommerce, Disable zoom effect and Lightbox on featured image for WooCommerce products

Please note that this code works only with the themes that follow the WordPress coding standards.

Add comment

Do you have a
WordPress problem?

Select what best describes your goals:

Cart

HOLD ON!

Do you have a
WordPress problem?

Become a WordPress Pro
with our easy to follow guides .

Hire an Expert to quickly solve
any WordPress related task.

We use cookies to provide an awesome experience on our website. By continuing to use this site, you agree to our tasty cookies.
🍪 Accept Cookies
Privacy Policy