Remove Magnifying glass icon and disable zoom function on product page Woocommerce

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

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)

Method 3: Use function.php file to hide zoom button

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