[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

GeneratePress 1.3.48

GP Premium 1.3.1

[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 );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Petr]

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

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alain Aubry]

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

[Leo]

Glad you figured out 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leon]

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

[Fernanda]

works perfectly. thanks! 😉

[Leo]

Glad you found the post 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts