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

WordPress & WooCommerce Tutorial: Remove Black Magnifying Glass Hover Mouseover Image featured image
(Last Updated On: September 8, 2016)

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.

1 thought on “WordPress & WooCommerce Tutorial: Remove Black Magnifying Glass Hover Mouseover Image

Leave a Reply

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

Silicon Dales