WebP (picture tags) does not work with WooCommerce variable products

[markonikolic985]

It looks like using WebP display (picture tags) won't work fine with WooCommerce variable products.

Tickets are tagged "img_variations" on HS - https://secure.helpscout.net/search/?query=tag%3Aimg_variations

[hogash]

Problem is mainly caused by $.fn.wc_variations_image_update from wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js in which src and all those data attributes are added on the parent picture tag, not the inner's source.

[iCaspar]

Reproduced: ✔️

Root Cause:
It is as @hogash says, above.
Specifically, the product variation attributes are set on

$product_img      = $product_img_wrap.find( '.wp-post-image' ),

But when using the <picture> tags the image urls in the <source> and <img> tags within the <picture> are not targeted/updated.

Proposed solution:
We can use imagify filters imagify_picture_source_attributes and imagify_picture_img_attributes to add wp-post-image class to the inner elements, and this seems to work locally for swapping out the images to load variation images.
We also need to filter on woocommerce_gallery_image_html_attachment_image_params to remove the wp-post-image class from the outer picture tag to enable the initial post image to be reset when clicking back to the "Choose an option" toggle in the menu.

Sample proof-of-concept code:

add_filter( 'imagify_picture_img_attributes', 'cg_test_wc_picture_tag', 10, 2 );
add_filter( 'imagify_picture_source_attributes', 'cg_test_wc_picture_tag', 10, 2 );
function cg_test_wc_picture_tag( $attributes, $image) {
    $attributes['class'] = 'wp-post-image';
    return $attributes;
}

add_filter( 'woocommerce_gallery_image_html_attachment_image_params', 'cg_test_remove_wc_post_image', 10, 4 );
function cg_test_remove_wc_post_image( $attributes, $attachment_id, $image_size, $image ) {
    if (isset($attributes['class'])) {
        unset($attributes['class']);
    }
    return $attributes;
}

Because all these filters should only be applied on the variable products, we should first test for if( $product->is_type( 'variable' ) ){ ... } and then add the filters on woocommerce_single_product_summary, priority 25, and remove them immediately on woocommerce_single_product_summary, priority 35, to prevent other images on the page from having the wp-post-image class applied.

Estimate Effort:
[S]

[vmanthos]

@iCaspar FYI, I had opened a ticket with WooCommerce about this:
woocommerce/woocommerce#29213

According to their reply, the issue is related to the fact that the Photoswipe library they use to display the lightbox, doesn't support <picture>.