How to Disable The WooCommerce Image Zoom on Hover (Easy Code Fix)

Disable The WooCommerce Product Image Zoom on Hover

In this blog you can learn how to Disable The WooCommerce Image Zoom on Hover. Does your WooCommerce store’s product images zoom automatically on hover, creating a jarring user experience? While this feature can be helpful, many store owners prefer a clean, static image display—especially for mobile users or minimalist designs.

In this guide, you’ll learn:
✅ Why disable image hover zoom? (UX, mobile, and design benefits)
✅ The exact code snippet to remove it (with safety checks)
✅ FAQ answers for common troubleshooting

Let’s dive into the simple PHP fix you can add to your theme’s functions.php file.

Code Implementation (Formatted for Clarity)

/**
 * Disable WooCommerce single product image zoom on hover
 */
function disable_product_image_zoom() {
    if (class_exists('WooCommerce')) {
        remove_theme_support('wc-product-gallery-zoom');
    }
}
add_action('wp', 'disable_product_image_zoom', 100);

Key Notes About the Code:

1. Safety Check: Verifies WooCommerce is active before running.
2. Priority 100: Ensures it runs after theme setup.
3. No Plugin Needed: Lightweight solution vs. bloated plugins.

Using Plugin

So, you’ve found the perfect snippet of code to disable the annoying image zoom on your WooCommerce product pages. Your first instinct might be to paste it into your theme’s functions.php file. Stop right there! Editing your theme files directly is a risky move—the next theme update will wipe your customizations away, potentially breaking your site.

The professional, safe, and recommended way to add this functionality is by using a free plugin called Code Snippets. It acts like a custom plugin for your code, keeping it safe from updates and making it easy to turn on or off. This guide will walk you through the entire process, step-by-step.

Step-by-Step Implementation Guide

Step 1: Install and Activate the Plugin

First, you need to get the plugin onto your site.

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New Plugin.
3. In the search bar, type “Code Snippets”.
4. Find the plugin (by Code Snippets Pro) and click “Install Now”, then “Activate”.

Step 2: Create a New Snippet

Once activated, you’ll find a new menu item called “Snippets” in your admin sidebar. Click on it.

1. On the Snippets page, click the “Add New” button at the top.

Step 3: Configure and Add the Code

Now, you’ll fill out the form to create your snippet.

• Title: Enter a clear, descriptive name. Example: Disable WooCommerce Product Image Zoom
• Code: Paste the corrected and improved code into the large text area.php

  /**
   * Disable WooCommerce single product image zoom on hover
   */ function disable_product_image_zoom() { if ( class_exists( 'WooCommerce' ) ) { remove_theme_support( 'wc-product-gallery-zoom' ); } } add_action( 'wp', 'disable_product_image_zoom', 100 );

• Important: Notice the function name in add_action now matches the function we created (disable_product_image_zoom). This is the fix for the original code you provided.
• Settings:
  • Description (Optional): You can add a note like “Removes the zoom effect when hovering over product images.”
  • Tags (Optional): Add tags like woocommerce, image, zoom.
  • Scope: Leave this as “Run snippet everywhere”. It’s safe because the code inside checks if WooCommerce exists first.
• Execution Mode: The default “Run snippet once” is typically used for one-time setup tasks. For this functionality, you need it to run every time the site loads. Select “Run snippet every time” from the dropdown.

Step 4: Save and Activate

1. Before saving, it’s good practice to click “Save Changes and Test”. This checks for major syntax errors.
2. If no errors are found, finally, click the blue “Activate” button to enable the snippet on your site.

Step 5: Test the Result

Go to one of your WooCommerce product pages and hover your mouse over the main product image. The zoom effect should now be completely disabled! The lightbox functionality (clicking to enlarge) will still work perfectly.

Conclusion (CTA + Next Steps)

Disabling the hover zoom effect takes just 30 seconds but can significantly improve your store’s usability—especially on mobile devices.

Next Steps:

1. Test the code in a staging site first.
2. Clear caches after implementation.
3. Monitor mobile bounce rates to see improvements.

Need help? Drop a comment below!

7 FAQs

1. Why disable WooCommerce image hover zoom?

• Improves mobile UX (accidental zoom triggers).
• Reduces distractions for minimalist stores.
• May slightly improve page speed.

2. Will this affect my product gallery slider?

No! This only disables zoom—sliders, lightboxes, and thumbnails remain intact.

3. Does this work with all WordPress themes?

Yes, but some themes (like Flatsome) may need additional CSS.

4. How to revert if something breaks?

Simply remove the code from functions.php or comment it out with /* */.

5. Can I disable zoom for mobile only?

Yes! Add this CSS snippet:

@media (max-width: 768px) {
    .woocommerce-product-gallery__image { pointer-events: none !important; }
}

6. Will this hurt SEO?

No! Google doesn’t penalize for removing hover effects.

7. Alternative: Disable via plugin?

Try “Disable WooCommerce Zoom” (but custom code is lighter).