How to Disable Product Zoom in WooCommerce? – Turn Off this Feature

welcome to the post About How to disable product zoom in Woocommerece Although it is one of the best-rated features by e-commerce owners but sometimes you have to turn zoom in feature according to the requirements of your theme or website’s code.

Product zoom-in is an outstanding feature of Woocommerce, under which users can hover over their mouse to the product, which will get zoomed. This will let the buyer get more enhanced visible information about the product. 

However, if the feature is loved by many, haters are still there. 

Meanwhile, if you wish to disable product zoom in the WooCoomerce feature, then probably it’s not a requirement of your product. You may sell gaming or any other product where the user doesn’t need to view the expanded view of the product.

If this is the case or any other reason, the good news we got for you is that it’s completely possible. Now you can turn off image zoom in WooCommerce. And here we will explain to you how.

So, without further ado, let’s dig into it.

How to Turn Off Product Zoom in WooCommerce?

Although, product zoom-in provides a greater view of the product and lets the user see more product details like the size, material or texture, and color. This will also let the user make an ultimate buying decision with ease.

Ideally, there are two ways to disable product zoom in WooCommerce – using a code in the function.php file or with the help of a plugin.

However, you must create a backup and the child theme of your website if you want to process method one. With that, if you have coding knowledge or are a technical person and know how to navigate to all the settings, then using a simple code is your go-to choice.

Don’t worry. We will walk you through the process.

Using a Plugin:

WordPress plugins are the best things everything is possible now for WordPress developers just due to the Large number of WordPress plugins. Though WooCommerce has this zoom-in feature by default, the additional variation images plugin can help you to turn off the hover effect in WooCommerce.

For this, you need to follow these simple steps.

1. First, log in to your dashboard to install and activate the plugin. The one we recommend is “additional variation images.”
2. Once installed, go to the additional variation images plugin through the website.
3. A screen will appear where you will see the 4 tabs “general, configuration, advanced, and migration.”
4. Go to the configuration tab, and there you go. Either you control its speed, turn the product slider on or off, and with that can also turn the zoom-in effect on or off.
5. So, uncheck the enable zoom image box and save the changes.

That’s it; you are all done. Not only is this, but the customization opportunity here is also limitless. For example, you can edit the shop thumbnail and column or control the image slider. It’s all up to you.

Use function.php file:

There are two ways to add a simple custom code to your function.php file. Either you create a child theme or use a simple code snippet plugin. Both methods are viable to turn off product zoom in WooCommerce. 

However, we highly encourage you to use the plugin to play safer, especially if you are unaware of coding or child themes.

So, for both methods, you need to use the following code snippet.

/**

 * Disable WooCommerce zoom effect on the product image

 * @author Abdelfatah Aboelghit

 * @version 1.0

 */

add_action( 'wp', 'divikingdom_disable_wc_zoom', 99 );

function divikingdom_disable_wc_zoom() {

               remove_theme_support( 'wc-product-gallery-zoom' );

}

Add via plugin: 

1. Install and activate the code snippet plugin.
2. Go to the plugin and click on add new.
3. Firstly, give the snippet a title.
4. Copy the code mentioned above and paste it over the snippet area.
5. Check the “on run on site front-end” option if it’s unchecked.
6. Now save the changes to activate the code and see the effect of the code.

Add via child theme: 

1. First, create a child theme for your site, and from the root directory, open the function.php file.
2. Here you need to place the code but make sure to place it at the very end of it.
3. Once the code is placed, save the changes.

Remember, if the file ends with the “symbol ?>”. You must remove it first and then place the code.

Final Words:

So, if you have an eCommerce website, use a WooCommerce plugin for customization. You must know that the zoom-in feature will always be there that can be turned off. However, disabling product zoom in WooCommerce is never a great idea. For example, the images might get blurry if you do so.

That’s why you must be assured of what you are doing.

Comment below if the code doesn’t work for you. We would love to assist.

You Should read

Till Next!