By default, in product page of Woocommerce, you will see a small Magnifying glass icon that allows to zoom product image.
For some reasons, you want to hide this icon or completely disable zoom (magnifying) function on Woocommerce website.
In this tutorial, we will go through step by step how to do that
Contents
Hide Magnifying glass icon (zoom icon) in Woocommerce
If you only want to hide magnifying (zoom) icon on product image, it’s very simple.
There’s css class .woocommerce div.product div.images .woocommerce-product-gallery__trigger
in Woocommerce’s style.css file, we just need to find this function and set to display:none to hide the icon and the magnifying glass icon will completely go disapear from product image
There’re 3 ways to do this, I recommend the 2nd method
Method 1: Directly edit woocommerce.css
Connect to your website using FTP protocol, then go to /youwebsite.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css
Edit this file with text editor tool and find class: .woocommerce div.product div.images .woocommerce-product-gallery__trigger
, it will be like this:
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { position: absolute; top: .5em; right: .5em; font-size: 2em; z-index: 9; width: 36px; height: 36px; background: #fff; text-indent: -9999px; border-radius: 100%; box-sizing: content-box; }
Next, add display: none;
to this class like this
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { display: none; position: absolute; top: .5em; right: .5em; font-size: 2em; z-index: 9; width: 36px; height: 36px; background: #fff; text-indent: -9999px; border-radius: 100%; box-sizing: content-box; }
Save woocommerce.css and refresh your website, now the magnifying button is gone
Method 2: Overide css using your theme’s style.css file
With this method, you won’t need to change Woocommerce core file like method 1, and I recommend this method
In WordPress admin, go to Appearance => Theme editor and open style.css file
Add the following line to the end of the file
/* hide woocommerce zoom icon by wooexplorer*/ .single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { display: none; }
Finally save changes, it should work now (remember to clear cache if you are using caching plugin)
This method use PHP code to hide a css class.
In Appearence => Theme editor, select function.php file
Add the following code to this file
/* hide woocommerce zoom icon using function.php by wooexplorer*/ function remove_image_zoom_support() { remove_theme_support( 'wc-product-gallery-zoom' ); } add_action( 'wp', 'remove_image_zoom_support', 100 );
Save changes and the icon should be no longer there.
Disable zoom (magnifying) function on Woocommerce website
If you want to completely disable zoom function when hover on product image you can add the following code to theme’s function.php file
Usage with woocommerce_single_product_zoom_options
filter hook:
// WOOEXPLORER.COM REMOVE ZOOM MAGNIFIER FUNCTION FROM PRODUCT PAGES IN WOOCOMMERCE//
add_filter( 'woocommerce_single_product_zoom_options', 'custom_single_product_zoom_options', 10, 3 );
function custom_single_product_zoom_options( $zoom_options ) {
// Disable zoom magnify:
$zoom_options['magnify'] = 0;
return $zoom_options;
}
Wrap up
All the code was tested and still working in 2020, if it does not work with your Woocommerce theme, please drop a comment below and a link to your site, I will inspect and guide how to make it work
2 Comments
Thank you Wooexplorer, it worked out fine for my Woocommerce website!
Do you also know how to DISABLE the zoom in function when the product image is clicked?
Hello John, glad to see the code works for your site
To disable Zoom function when the product image is click, you need to disable lightbox function in WordPress.
Probably your theme or a plugin has lightbox function on your website.
Hope this helps!