By default, WooCommerce allows you to zoom in on the product image when you hover over it. There is no built-in option if you want to remove the zoom-on-hover effect.
You need to work with custom code to disable the zoom-on-hover effect, which can be difficult for you if you are a non-tech person.
There may be several reasons you want to disable the zoom-on hover effect in WooCommerce. Maybe you are selling products that don’t require close inspection, like games, gaming consoles, etc.
So In today’s article, I’ll walk you through the step-by-step process to disable the zoom-on-hover effect in WooCommerce with the help of the WooCommerce Additional Variation Images plugin. You will not need to write a single line of code to achieve the final results.
So, without any further ado, let’s jump into the tutorial.
How to Disable the Zoom on Hover Effect in WooCommerce?
The WooCommerce Additional Variation Images plugin makes it very easy to disable the zoom-on-hover effect in WooCommerce. You can follow the following steps to disable the zoom-on-hover effect from all the products.
1. Install and Activate the WooCommerce Additional Variation Images Plugin
Note: You can skip this step if you have already installed and activated the WooCommerce Additional Variation Images plugin.
To install the WooCommerce Additional Variation Images plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the WooCommerce Additional Variation Images plugin.
Once you have installed and activated the plugin, navigate to the Woosuite » Additional Variation Images from your WordPress admin dashboard.
You can edit the gallery width for different devices, edit the shop page thumbnail column, control the image slider, and much more.
3. Click the Configuration Tab
Once you are in the plugin’s general settings, click the ‘Configuration’ tab from the top menu. From there, you can enable or disable the gallery slider autoplay, control its speed and slider arrows, enable or disable the zoom effect, and more.
4. Disable the Hover on Zoom Effect
Now scroll to the ‘Enable Zoom Image’ option and uncheck the box to disable the zoom-on-hover effect from all the product images.
5. Save Changes
After that, click the green ‘Save Changes’ button at the top right corner of your screen to save the settings.
6. Final Results
Once the settings are saved, navigate to any of the product pages from your store and hover your cursor over the product image, and you’ll notice that nothing happens and the zoom effect has been disabled.
You can easily enable the zoom effect just by checking the ‘Enable Image Zoom’ option whenever you want.
Wrapping Up
That’s it for today’s article.
I hope this article was helpful to you and you have successfully disabled the zoom-on-hover effect in WooCommerce from all the product images.
You may also want to customize the product image size, add a video to WooCommerce products, and add additional variation images in WooCommerce.
If you have questions, please post them in the comments. I would love to answer them. You can also contact our customer support team for quick assistance. They typically reply within a few hours.
Ready to get started? Download the WooCommerce Additional Variation Images plugin now!
