[WooCommerce] How To Disable Product Image Zoom

Step 1: Accessing the Theme File Editor

1. Start by logging into your WordPress website’s admin panel.
2. On the left-hand side of the dashboard, click on ‘Appearance‘.
3. Inside the Appearance menu, find and click on ‘Theme File Editor‘.

Step 2: Editing the functions.php File

The functions.php file in WordPress is a powerful tool. It’s used to add or modify the functionality of your WordPress theme. In this case, you’ll be adding a snippet of code to disable the image zoom effect.

1. Locate functions.php: In the Theme File Editor, you’ll see a list of theme files on the right-hand side. Find and click on functions.php.

2. Understanding the Code: Before making changes, it’s important to understand the code you’re adding:

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

This code defines a new function remove_image_zoom_support that removes the zoom feature from WooCommerce product galleries. The add_action line tells WordPress to execute this function.

3. Adding the Code: At the bottom of the functions.php file, add the provided code snippet. Ensure you don’t overwrite existing code.

4. Save the File: Click the ‘Update File’ button to save your changes.

5. Check Your Website: Visit your WooCommerce store and open a product page to ensure that the zoom effect is disabled.