How To Disable WooCommerce Product Image Zoom

I didn't want the default product image zoom feature that comes with WooCommerce.

There are two ways to disable the WooCommerce product image zoom function:

remove_theme_support( 'wc-product-gallery-zoom' );

or

add_filter( 'woocommerce_single_product_zoom_enabled', '__return_false' );

From trying to implement it, the remove_theme_support way often doesn't work by putting it straight into your functions.php file.

This is because it's often called later in one of the hooks. However, this can get a little confusing.

To use GeneratePress as an example, if you use a child theme for the free version, you'd call it from 'after_setup_theme', but if you're using the GeneratePress Pro addon, you'd call it from 'wp'.

You may have to try a few options to see what works with your specific theme.

You could try:

add_action( 'after_setup_theme', 'custom_remove_product_zoom', 11 );

function custom_remove_product_zoom() {
  remove_theme_support( 'wc-product-gallery-zoom' );
}

or

add_action( 'wp', 'custom_remove_product_zoom' );

function custom_remove_product_zoom() {
  remove_theme_support( 'wc-product-gallery-zoom' );
}

The "11" in the first code is to make sure it fires after your theme's code.

If you've got it working, the result is that the zooming and the magnifying glass icon will disappear.

If these don't work and you really want to use the remove_theme_support option, the best thing to do is to download the theme to your computer, open the folder in Atom and search for wc-product-gallery-zoom in all the files. The hotkey on PC for search all is CTRL+SHIFT+F.

Otherwise, you can go straight to the source with returning false through the filter.

This hooks straight into WooCommerce /includes/class-wc-frontend-scripts.php and will override anything the theme is trying to do.

Once you've got this working, you might want to check out how to disable the image link that will be left behind.