By default, WooCommerce has a zoom effect on the main product page when you hover over it. This only works on single product pages. If you don’t like this zoom effect, follow the steps below to learn how to disable it.

There are two ways to add custom PHP code to your WordPress websites; via a child theme or the free Code Snippets plugin.

I always recommend this plugin because it is safer, and you can enable/disable snippets individually from your WordPress admin dashboard without the need for modifying code or worrying about breaking anything.

You can download the plugin from here.

Install it like any other WordPress plugin.

But you can always use the child theme’s functions.php file if you want.

The Code Snippet

/**
 * Disable WooCommerce zoom effect on the product image
 * @author Abdelfatah Aboelghit
 * @version 1.0
 */
add_action( 'wp', 'divikingdom_disable_wc_zoom', 99 );
function divikingdom_disable_wc_zoom() {
	remove_theme_support( 'wc-product-gallery-zoom' );
}

Choose one of the two methods to disable WooCommerce image zoom effect.

Add the code snippet via the plugin

If you go with the Code snippets plugin:

1. Go to Snippets -> Add New. Give the snippet a title; let’s say: Disable WooCommerce zoom effect.

2. Copy the code above and paste it into the Code area.

3. Check the “Only run on site front-end” option.

4. Click Save Changes and Activate.

Add the code via a child theme

If you prefer to use the child theme method, that’s fine. Any child theme has a functions.php file in its root directory.

1. The code should be added at the very end of the functions.php file.

2. If the file ends with the ?> symbol, remove it and then add the code.

Let me know if the code works for you!