WooCommerce Disable Zoom on Product Image with a Code Snippet

WooCommerce disable zoom on product image is a common requirement for many online store owners. This tutorial will show you how to disable the zoom effect on product images in WooCommerce using a simple code snippet.

Prerequisites

Please make sure you have the following installed and activated:

• WooCommerce
• Code Snippets

Understanding the Problem

Sometimes, the zoom effect on WooCommerce product images can be more of a hindrance than a help. It can be distracting and may not provide the user experience you’re aiming for.

Solution Overview

We will use the Code Snippets Plugin to add a custom code snippet that disables the zoom effect on WooCommerce product images.

Installing the Code Snippets Plugin

1. Navigate to Plugins > Add New in your WordPress dashboard.
2. Search for “Code Snippets”.
3. Install and Activate the plugin.

Tip: The Code Snippets Plugin allows you to add custom code snippets without editing your theme’s functions.php file. It also supports full CSS, JavaScript, Gutenberg, and Elementor integrations.

Adding the Code Snippet to Disable Zoom

1. Navigate to Snippets > Add New.
2. Name it “Disable WooCommerce Product Image Zoom”.
3. Copy the code snippet below:

   function remove_image_zoom_support() {
       remove_theme_support( 'wc-product-gallery-zoom' );
   }
   add_action( 'wp', 'remove_image_zoom_support', 100 );

   Source: Code Snippets

4. Paste the code into the snippet editor.
5. Save changes and Activate the snippet.

Note: After activating the snippet, the zoom effect on your WooCommerce product images will be disabled.

Verifying the Changes

1. Navigate to a WooCommerce Product Page.
2. Hover over the product image to confirm that the zoom effect has been disabled.

Conclusion

Disabling the zoom effect on WooCommerce product images is a straightforward process with the Code Snippets Plugin. Now, your online store should offer a more streamlined user experience without the zoom distraction on product images.