Learn in this tutorial how to remove the zoom effect on WooCommerce product images using a simple code snippet.
One of the advantages of being an OsomCode subscriber is that you can propose tutorials. For example, the other day a subscriber asked me if it was possible to remove the magnifying glass and zoom on WooCommerce images.
By default, WooCommerce shows a magnifying glass icon on the product image and if you hover over it, it zooms the image.
This can be very interesting if you sell physical products, but it may make less sense if you sell courses or digital products, don’t you think?
So here’s how to do it:
Steps to remove zoom and magnifying glass from WooCommerce images
To disable the zoom I’m going to show you two snippets, because depending on the theme or plugins you’re using it’s possible that one of them won’t work for you.
1A. Remove WooCommerce zoom support from the theme
Add the following code at the end of functions.php or in your functionality plugin:
To see this and another 997 code snippets of this website, login or subscribe here.
Both strategies achieve the same thing, so you can use any of them but only one!
2. Hide the magnifying glass using CSS
To remove the magnifying glass icon, add the following fragment to the end of the file style.css:
To see this and another 997 code snippets of this website, login or subscribe here.
Conclusion
As you can see, with a few lines of code you can disable WooCommerce image zoom and remove the magnifying glass icon.
Any questions? I read you in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
