WooCommerce variations not working well again with picture tag method for WebP display

[joejoe04]

Describe the bug We have seen at least a couple of users begin to once again have issues with WooCommerce product variations when the "Use tags" option for WebP display is used.

To Reproduce Steps to reproduce the behavior:

1. Test a product page with variable product options
2. Make sure the images are optimized, WebP versions created, and enable the "Use tags" option for WebP display
3. View the product page and try to select one of the variations (such as color), and the main image will not be updated as it should be.

Expected behavior The main image should be updated when a variation is selected.

Additional context

We had worked on this in the past: https://github.com/wp-media/imagify-plugin/issues/495

But I believe this may have started happening again after an update released from WooCommerce.

Case 1: https://secure.helpscout.net/conversation/1833760001/335064/ https://csketchbstage.wpengine.com/product/ladybirds-stationery-cards/

Case 2: https://secure.helpscout.net/conversation/1846934590/337318/

Backlog Grooming (for WP Media dev team use only)

• [ ] Reproduce the problem
• [ ] Identify the root cause
• [ ] Scope a solution
• [ ] Estimate the effort

[joejoe04]

Related: https://secure.helpscout.net/conversation/1922918391/348948/

[joejoe04]

Related: https://secure.helpscout.net/conversation/1928249856/350036/

[JeraldHuff]

Hi JoeJoe,

I too am still waiting for a fix on this issue for several sites I manage. I have never seen this work on any version of Imagify and WooCommerce with the "Display images in WebP format on the site" <picture> method.

To fix the variable image issue I had to disable using WebP images sitewide. While this issue is with WooCommerce, I think it would be nice if Imagify could add a "Never Convert URL(s)" area that allows arguments like /example/(.*). This is similar to the way WP Rocket handles "Never Cache URL(s)".

This would at least allow us to disable the WebP conversion on any problematic pages - while maintaining it elsewhere.

[timothyfisherdev]

@joejoe04 @JeraldHuff This may not solve your problem, but might be something to double check. Make sure your product page is firing the woocommerce_single_product_summary hook.

I ran into this today and found out that the fix for this (#495 / #587) was not being applied because the site was using Elementor to build the single product template. The fix is hooked into the woocommerce_single_product_summary hook which Elementor does not fire when using the builder to build that template. I ended up adding the fix to a hook that it does fire (woocommerce_before_single_product) and it worked:

/**
 * Fixes three-way compatibility issue with WooCommerce, Elementor (single product template), and Imagify (webp <picture> tag setting)
 */
add_action( 'init', function () {
    if ( class_exists( \Imagify\ThirdParty\WooCommerce\WooCommerce::class ) ) {
        add_action( 'woocommerce_before_single_product', [
            new \Imagify\ThirdParty\WooCommerce\WooCommerce(),
            'variable_products_webp_compat'
        ] );
    }
} );

[ogogi]

Hello, I am having the same problem. I am using Flatsome theme. I would be very happy if someone could help.

[winzkigermany]

Why is this issue stalled for nearly a year now? What good is imagify for, when I have to disable webp?

[Mai-Saad]

Can see the image is changing with variations using imagify 2.2.0.1 and Woocommerce 8.7.0 while using rewrite rules or <picture> method. Notes: While <picture> display option => Product image is rewritten to next-gen but not the one in the jquery.zoom.min.js. However, if we clear variations, the image in zoom request will be next-gen ====> served with rewrite rules option => Next-gen isnot served for Variant images (served from optimized one) ===>served with rewrite rules option

Tested on: WP 6.4.3 PHP 8.2.10 theme twentytwentythree , flatsome 3.14.3

[pmochine]

Same issue! I need to set the settings to Rewrite Rules. It is a bummer