WordPress & WooCommerce Tutorial: Remove Black Magnifying Glass Hover Mouseover Image

Robin ScottTutorials, WooCommerce Tutorials, WordPress Tutorials1 Comment

There is a black magnifying glass on image mouseovers on some archive pages in WordPress > WooCommerce which a lot of our clients want removed. It makes sense: the icon suggests zooming in, rather than clicking to view more info on the product.

Adding the following line to your theme’s Custom.css or somewhere else in your CSS that won’t get removed on upgrade should achieve the desired result:

ul.products li.product a:hover .img-wrap .details-link {display: none !important;}

Note that some versions of Firefox have an interesting quirk which means that if you run your mouse over a product image really fast, you see the magnifying glass. At present, I’m not quite sure just why, though this issue does not repeat in other browsers!

Leave a comment below if this helps you, or you experience difficulty. Feel free to book us to work on your WooCommerce / WordPress based website too.

One Comment on “WordPress & WooCommerce Tutorial: Remove Black Magnifying Glass Hover Mouseover Image”

  1. Remember that the !important directive is IMPORTANT! It tells the browser to override any other (and conflicting) CSS directives whether they be inline or in file.

Leave a Reply

Your email address will not be published. Required fields are marked *