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.
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“.
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;
}
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 );
Please note that this code works only with the themes that follow the WordPress coding standards.