0

I'm currently using the WooCommerce plugin with the Storefront theme on my WordPress site. On the single product pages, the main product image has a default mouseover behavior that I want to modify.

At present, if you mouseover the center of the product image, the autozoom feature is triggered. However, I want to disable this autozoom effect while still retaining the full-size gallery view when clicking on the magnifying icon.

I tried this in my footer.php storefront child theme but it seems to have had no effect:

<script>
    jQuery(document).ready(function($) {
        var $easyzoom = $('.woocommerce-product-gallery__image').easyZoom();
        var api = $easyzoom.data('easyZoom');

        api.teardown();
    });
</script>

1 Answer 1

0

Try this, I am not able to test it myself but I do remember using it or something like it in the past:

jQuery(document).ready(function($) {
    // Disable zoom on product images
    $('.woocommerce-product-gallery').trigger('zoom.destroy');
});

You can try this in your functions.php file

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

Or, try this css

.woocommerce ul.products li a img,
.woocommerce div.product div.images img {
    pointer-events: none; /* Disable hover events */
}
2
  • the css almost worked but if i mouse over then out then back over again the zoom is still operational. also, the css disables the ability to navagate the thumbnailsk below the main image. the function broke my site and the jquery on the product page seemed to have no effect. thanks for trying tho Dec 31, 2023 at 9:07
  • 1
    Placed in the footer the jquery works. thank you! Dec 31, 2023 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.