Disable WooCommerce Product Image Zoom

WooCommerce product pages zoom into the image as soon as the mouse moves over it. On large photos that can be jarring, it hides part of the image while customers only want to scroll, and many shops prefer a click to open the lightbox instead.

This snippet disables the WooCommerce product image zoom. The gallery thumbnails and the lightbox keep working as before.

The snippet

<?php
/**
 * Disable the hover zoom on WooCommerce product images. The gallery and lightbox keep working.
 */

// The theme declares zoom support; take it away before WooCommerce loads its scripts.
add_action( 'wp', 'dpc_disable_product_image_zoom', 100 );

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

// The setting WooCommerce passes to the gallery script, for themes that add support later.
add_filter( 'woocommerce_single_product_zoom_enabled', '__return_false', 100 );

How it works

WooCommerce turns on the zoom only when the theme declares wc-product-gallery-zoom support. The snippet removes that support on the wp action, after the theme has set it up and before WooCommerce decides which scripts to load. The zoom script is then not loaded at all.
The woocommerce_single_product_zoom_enabled filter sets the zoom_enabled value WooCommerce passes to its gallery script. Returning false there also covers themes that add the support again later.
The function name now has a dpc_ prefix. The older version used remove_image_zoom_support, a name that can clash with a theme or plugin.

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Everywhere, tick PHP under Script location, paste the code into the PHP editor, edit the config and publish. Leave Action/Hook empty.

The code waits for the wp action, so it is safe to load early and does nothing in wp-admin.

The same code also works unchanged in a small plugin or an mu-plugin.

Customise it

Disable the lightbox too: add remove_theme_support( 'wc-product-gallery-lightbox' ); in the same function.
Disable the gallery slider: add remove_theme_support( 'wc-product-gallery-slider' );. Thumbnails then stay below the main image without sliding.
Keep zoom on some products: add a condition at the top of the function, for example if ( is_product() && has_term( 'posters', 'product_cat' ) ) { return; }.

Gotchas

Block themes that use the newer Product Gallery block have a zoom setting in the block itself. Turn it off there; the snippet only changes the classic gallery.
Some themes ship their own zoom script. If the image still zooms, check the theme options.
Clear page and asset caches after adding the snippet, or the old gallery settings may still be served.

Other small WooCommerce product page tweaks: Change Add to Cart Button Text in WooCommerce.

In the Scripts Organizer library Import it with one click from Scripts Organizer.