[Resolved] Remove zoom effect on WooCommerce product image

[Petr]

Hi,

I’m having trouble removing default WooCommerce behavior – zoom effect on product image hover.

I found out that this piece of code should work:

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

Unfortunatelly, it doesn’t.

I’ve tried it with other theme, and it worked there fine, so I suppose, this problem is your theme’s specific.

Could you pls help me, what’s the right way, how to do it with your theme?

Thanks
Petr

[Tom]

Can you try this instead?:

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

[Petr]

Wow, that was quick!
Works perfectly, thanks a lot!

[Tom]

You’re welcome 🙂

[Daniel]

Where would I paste this code to disable the zoom over hover effect?

[Tom]

This should help: https://docs.generatepress.com/article/adding-php/

[Felipe]

I used a slightly different code, also disabling the lightbox, however, when clicking the image, it is directed to its larger variant, in full screen (with this, leaving the site).
Is it also possible to disable the click completely?

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

[Tom]

This might help: https://stackoverflow.com/a/20202851

[Felipe]

Hello Tom.

This code has been deprecated since the release of WooCommerce version 3.0+.
Now the code that works is this, however, only if you have a single image for the product.

function custom_single_product_image_html( $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', 'custom_single_product_image_html', 10, 2);

But in my case, as have a gallery of images, I solved with CSS (and without the code above):

.woocommerce-product-gallery__image.flex-active-slide {
    pointer-events: none !important;
}

Sorry to put the options here, but maybe I can help other people. 🙂

[Tom]

Thank you! I appreciate you sharing the solution 🙂

[Alain Aubry]

Thank you a lot!
I was using “after_setup_theme” and it was driving me crazy!

[Leo]

Glad you figured out 🙂

[Leon]

I was searching for the same code. Thank you Tom.

[Fernanda]

works perfectly. thanks! 😉

[Leo]

Glad you found the post 🙂

[Author]

Posts