How to Disable Product Image Zoom in WooCommerce

If you’re running a WooCommerce store and don’t want your customers to be able to zoom in on product images, you’re not alone. While the image zoom feature can be useful in some cases, it may not be necessary or desirable for all products. In this blog post, we’ll walk you through how to disable product image zoom in WooCommerce.

Before we dive into the details, it’s important to note that modifying your site’s code can be risky and may cause issues if not done correctly. We recommend making a backup of your site before making any changes and consulting with a developer or the theme’s support team if you’re unsure about any of the steps.

Step 1: Add Custom Code to Your Theme

One way to disable the product image zoom feature in WooCommerce is by adding custom code to your WordPress theme. Here are the steps you can follow:

1. Log in to your WordPress admin panel and go to Appearance > Theme Editor.
2. Open the functions.php file of your active theme.
3. Add the following code at the end of the file:

add_action( 'after_setup_theme', 'remove_theme_support', 11 ); function remove_theme_support() { remove_theme_support( 'wc-product-gallery-zoom' ); }

This code will remove the product image zoom feature from your WooCommerce store.

Step 2: Add Custom CSS to Your Site

If the above solution didn’t work, you can try adding custom CSS code to your site to disable the product image zoom feature. Here’s how:

1. Log in to your WordPress admin panel and go to Appearance > Customize.
2. Click on Additional CSS at the bottom of the left-hand menu.
3. Add the following CSS code in the text area:

.woocommerce-product-gallery__trigger { display: none; }

This CSS code will hide the product image zoom button and prevent users from zooming in on the product images.

If the product image zoom is still happening when hovering over the image, you can add the following CSS code to disable the hover effect:.woocommerce-product-gallery__image:hover { cursor: default !important; }

Step 3: Test Your Changes

Once you’ve made the changes, it’s important to test your site to ensure that the product image zoom feature has been disabled. Clear your browser cache and refresh the product page to see the updated changes.

Conclusion – Disable product image zoom

Disabling the product image zoom feature in WooCommerce is a simple process that can be achieved with a few lines of code or custom CSS. However, it’s important to remember that modifying your site’s code can be risky and may cause issues if not done correctly. If you’re unsure about any of the steps, we recommend consulting with a developer or the theme’s support team for assistance.