- This topic has 19 replies, 2 voices, and was last updated 3 months, 3 weeks ago by
Leo.
-
AuthorPosts
-
July 30, 2017 at 10:18 am #357108
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
PetrGeneratePress 1.3.48GP Premium 1.3.1July 30, 2017 at 10:39 am #357129Tom
Lead DeveloperLead DeveloperCan 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-developmentJuly 30, 2017 at 10:45 am #357132Petr
Wow, that was quick!
Works perfectly, thanks a lot!July 30, 2017 at 10:55 am #357137Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 13, 2017 at 12:41 pm #384860Daniel
Where would I paste this code to disable the zoom over hover effect?
September 13, 2017 at 9:56 pm #385036Tom
Lead DeveloperLead DeveloperThis 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-developmentJanuary 9, 2018 at 12:58 pm #466953Felipe
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 );
January 9, 2018 at 7:14 pm #467170Tom
Lead DeveloperLead DeveloperThis 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-developmentJanuary 10, 2018 at 3:37 am #467379Felipe
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. π
January 10, 2018 at 9:49 am #467753Tom
Lead DeveloperLead DeveloperThank 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-developmentJuly 3, 2018 at 2:45 pm #614699Alain Aubry
Thank you a lot!
I was using “after_setup_theme” and it was driving me crazy!July 3, 2018 at 5:34 pm #614765Leo
StaffCustomer SupportGlad you figured out π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 27, 2018 at 9:46 pm #688254Leon
I was searching for the same code. Thank you Tom.
May 23, 2019 at 9:30 am #908974Fernanda
works perfectly. thanks! π
May 23, 2019 at 10:29 am #909011Leo
StaffCustomer SupportGlad you found the post π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- The topic ‘Remove zoom effect on WooCommerce product image’ is closed to new replies.