If you go to any stores, you can find that if you hover the product’s images, there is a magnifier appears to help you view the products better (the product image is zoomed in so you can see a specific area better). WooCommerce supports this feature too. However, I personally don’t like the default effects of WooCommerce:
Original image:
Product image on hover:
So, if you are like me, you may wonder: how can I disabled product zoom feature in woocommerce?
How To Disable Magnifying Glass Effects On WooCommerce
Disabling the zoom effect in WooCommerce is quite simple. However, you need to do something first.
First thing first, create a child theme if you haven’t got one
If this is the first time you’ve heard of WooCommerce child theme, let me introduce it quickly. A child theme is an extension of your current theme that lets you add additional functionalities to your site without changing your current theme’s code. Why is it beneficial and how to create one? Check out my post on creating child theme here.
Now, I assume that you have created and activated the child theme. However, if you are in a rush, you can proceed without one.
All you need to do is to go to Appearance -> Editor and put the following code at the bottom of your functions.php file
add_action( 'after_setup_theme', 'bc_remove_magnifier', 100 );
function bc_remove_magnifier() {
remove_theme_support( 'wc-product-gallery-zoom' );
}If you view the product image now and hover over the image, the effects are now removed.
Conclusion
As you can see, if you don’t like the default behavior that WooCommerce gives to products image on being hovered, removing it is quite simple. This tip is also useful if you are making a custom plugin to add a better magnifying effect to the products’ images.