How to Disable Product Zoom in WooCommerce ( 6 Easy )

Are you looking for how to disable product zoom in wooCommerce? no worries I am here to give you the complete solution regarding this problem. If you are the owner of an online store and using WooCommerce as your main plugin, you might have noticed that all the product images are set to automatically zoom in when the user hovers over any of the product images. This feature might be helpful for some users, but maybe it can be distracting or unnecessary for other customers.

As an owner of the store you want that your store should perform well and generate high sales and you are decided to disable the product zoom feature, there are multiple ways to do it. In this article, we will explore 5 methods for how to disable product zoom in WooCommerce.

Method 1: Edit CSS Code to Disable Product Zoom in WooCommerce

If none of the above methods is not working for you, then you need to use this simple technique of using CSS. You can easily disable the product zoom feature in Woocomerce by adding simple CSS code to your theme. Here are the steps you need to follow:

1. Log in to your WordPress dashboard and navigate to Appearance > Customize.
2. There you will be able to see Additional CSS options.
3. In this box add the code which is mentioned below.
4. Hit the Publish button to save.

.woocommerce-product-gallery__image {
pointer-events: none;
}

This simple CSS code will hide Product Zoom in the WooCommerce store for all products available.

Method 2: Edit Theme Code | Edit PHP Code

This is the fourth method to disable product zoom is by adding the code in the theme file directly. However, this is a little sensitive method and not suitable for everyone. I recommend that, if you have a little technical knowledge then you should go with this method. Follow the steps I have mentioned below :

1. Log in to your WordPress and navigate to Appearance > Theme Editor.
2. There you will be able to see many files on the right side you need to select the functions.php file from there.
3. Add the following code to the end of the file:
4. Click on the Update File button.

function remove_image_zoom_support_ehsandanish() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support_ehsandanish', 100 );

This simple PHP code will hide Product Zoom in the WooCommerce store for all products available.

Method 3: Use a Child Theme to Override Functions

If you are using a custom theme and don’t want to mess with the parent theme, then this is the method you need to follow. You need to create a child theme and override the functions. Here are the steps you need to follow:

1. Go to your WordPress dashboard and navigate to Appearance > Theme Editor.
2. There you will be able to see many files on the right side you need to select the functions.php file from there.
3. Add the following code to the end of the file:
4. Click on the Update File button.

<?php
// Enqueue the child theme stylesheet
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

// Remove support for product zoom
function remove_theme_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'after_setup_theme', 'remove_theme_support', 100 );

This simple PHP code will hide Product Zoom in the WooCommerce store for all products available.

Method 4: Disable the Zoom option from specific products or categories in woocommerce

If you are wandering about is it possible to disable the zoom option from a specific product or from a specific category? let me answer your question, YES, it’s possible.  Here are the steps you need to follow:

1. Go to your WordPress dashboard and navigate to Plugins > Add New.
2. 
3. You need to search for this plugin “YITH WooCommerce Product Gallery & Image Zoom”
4. Simple install and activate this plugin
5. After that, you will be able to see an extra option in your WordPress dashboard. Using that option you can disable the zoom option from a specific product or a category

Method 5: Disable the Zoom option from mobile in woocommerce

1. Go to your WordPress dashboard and navigate to Plugins > Add New.
2. 
3. You need to search for this plugin “YITH WooCommerce Product Gallery & Image Zoom”
4. Simple install and activate this plugin
5. After that, you will be able to see an extra option in your WordPress dashboard. Using that option you can disable the zoom option from a specific product or a category

Method 6: Disable Zoom in WooCommerce Settings

This method is the easiest way to disable product zoom in WooCommerce is to simply go to the WooCommerce settings and disable the zoom feature from there. To do this follow the steps written below.

1. In the WordPress dashboard,  navigate to Appearance > Customize.
2. Just click on the WooCommerce tab > then Single Product in the left section.
3. There you will be able to see disable the “Product Image Zoom” toggle
4. Hit the Save Changes button.

this method varies from theme to theme. Some themes have this option and it can be possible that other themes may not have this option.

Final Thoughts

If you are serious about your woo commerce store then Disabling product zoom in WooCommerce can help you to improve the user experience for your users or customers who may find this feature distracting or non-user friendly. I have explained all five different methods above, if any one of the methods is not working for you, then you can use the other method to disable the product zoom feature on your WooCommerce store.

Note: Whether you choose to use a edit CSS or theme code, or create a child theme, you need to make sure that you have a complete backup of your entire website before applying them to your live site.

FAQs

Will disabling product Zoom affect my SEO?

The simple answer is No, disabling product zoom will never affect your website SEO directly or your product image. But it may affect your user experience which is also an important factor for SEO.

Can I disable product zoom for specific products only?

Yes, you can use some of the methods discussed in this article to disable product zoom for specific products only.

Is it recommended to edit the theme or plugin code?

It totally depends upon the requirements. If it’s necessary then you can, but you should have proper knowledge or you can hire an expert to do so. Always remember to have a backup of your entire site before performing such activity.

Can I re-enable the product Zoom later if I change my mind?

Definitely Yes, You just need to reverse the changes you made earlier.