October 23, 2023

WooCommerce Disable Zoom on Product Image with a Code Snippet

Play Video

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.


Please make sure you have the following installed and activated:

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.


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.

Required Resources

WooCommerce Logo
Free Options
Code Snippets Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
WooCommerce Disable Zoom on Product Image with a Code Snippet
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.