• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Remove the zoom on WooCommerce product images

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.

WooCommerce product image with magnifying glass and zoom enabled.

By default, WooCommerce shows a magnifying glass icon on the product image and if you hover over it, it zooms the image.

WooCommerce product image zoomed in when hovering over it.

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?

WooCommerce product image without magnifying glass and zoom disabled.

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 839 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 839 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. 😉

CSS PHP Products Title WooCommerce

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?