How to Remove Zoom Effect on WooCommerce Product Image

On the product page, the WooCommerce product thumbnail comes with a zoom effect by default.

This zoom effect is an important feature that allows users to examine the product image in detail.

Some of the product images do not require a zoom effect and you may want to remove the zoom effect on this WooCommerce image.

In this post, I will share quick tips on how you can remove the zoom effect on the WooCommerce product image.

WooCommerce Product Image Zoom Effect

The Zoom effect appears when you hover over the large image on the single product page.

This zoom effect appears as shown in the image below:

Remove Zoom Effect on Woocommerce Product Image

if You don’t like the product image zoom on the single product you can use the filter to remove it. The following are the steps you should take to remove the zoom effect on WooCommerce products:

1. Log in to your WooCommerce site and access the theme editor under the Appearance menu > Theme Editor. Alternatively use the FTP or CPanel file manager to access the functions file of the active theme, preferably using the child theme.
2. Open the functions.php file of the child theme and add a filter that hooks on ‘woocommerce_single_product_image_thumbnail_html’. For example, the following is the code for adding the filter add_filter('woocommerce_single_product_image_thumbnail_html', 'njengah_remove_zoom_effect_product_image', 10, 2);
3. Create the callback function and in the function pass two parameters $html and $post_id. In the return statement of this function use the apply filters to set the size of the product image and remove the zoom effect as follows : apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
4. When you add this code snippet in the functions file save it to update the changes and you will successfully remove the zoom effect from the single product image.
5. This is the full code snippet that you should add to the functions.php to remove the zoom effect from the single product image.

/**
 * Remove Zoom Effect on WooCommerce Product Image 
 *
 * @param $html, $post_id 
 *
 * @return $function 
 */

function njengah_remove_zoom_effect_product_image( $html, $post_id ) {
	
    $post_thumbnail_id = get_post_thumbnail_id( $post_id );
    return get_the_post_thumbnail( $post_thumbnail_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
}
add_filter('woocommerce_single_product_image_thumbnail_html', 'njengah_remove_zoom_effect_product_image', 10, 2);

Second Option to Remove Zoom from Product Image

For some reason the first method may fail in some themes or due to conflict with other WooCommerce hooks, you have used in the plugin.

An alternative code that you can use to remove the zoom effect from a single WooCommerce product page is the remove_theme_support() function.

The zoom effect in the product image exists since it’s added by the lightbox, slider, and zoom functions that are supported in the core views file.

You can remove the zoom effect by unhooking these functions that add the zoom effect. The following is the code that you can use to remove the zoom effect:

remove_theme_support( 'wc-product-gallery-zoom' );

remove_theme_support( 'wc-product-gallery-lightbox' );

remove_theme_support( 'wc-product-gallery-slider' );

Add this code snippet to the functions.php and save the changes and check to see if the zoom effect on the product image has been removed. You can this code to the functions.php using an action hook as follows:

add_action( 'wp', 'njengah_remove_zoom_effect_theme_support', 99 );

function njengah_remove_zoom_effect_theme_support() {

   remove_theme_support( 'wc-product-gallery-zoom' );

   remove_theme_support( 'wc-product-gallery-lightbox' );

   remove_theme_support( 'wc-product-gallery-slider' );

}

This code will also remove the zoom effect from the product image.

Final thoughts

In this post, we have highlighted the two ways you can use to remove the zoom effect from WooCommerce single product image.

You should add this code to the functions.php of the child theme for it to be effective and to avoid losing the changes when you update the version of your current theme.

Similar Articles

1. How to Change Add to Cart Text WooCommerce Guide with Examples
2. How to Make Phone Number Required WooCommerce
3. How to Disable Coupons In WooCommerce
4. How to Hide Admin Bar for WooCommerce Customers or By User Roles
5. How to Create WooCommerce Clear Cart Button Shortcode
6. How to Get Product Image src WooCommerce
7. How To Display Product Variations In WooCommerce
8. How to Change SKU Text WooCommerce
9. How to Display Username In WooCommerce
10. How to Create tax_query WooCommerce Example
11. How to Get Product ID In WordPress
12. WooCommerce Single Product Page Show All Categories
13. WooCommerce Make All Images the Same Size
14. How to Disable Link on Product Image WooCommerce
15. How to Disable Click on Product Image WooCommerce
16. How to Check If a Product is Variable In WooCommerce
17. How to Resize WooCommerce Product Images
18. How to Add Extra Text to Price WooCommerce
19. How to Add Description after Price in WooCommerce
20. How to Check If a Product Page In WooCommerce