WooCommerce Variations

Hi @jtournier!

I’m really sorry you’re having issues with this! You are correct that this issue should have been resolved. Just to be sure, have you tried disabling WebP display in your Imagify plugin settings page to make sure that is the cause? Or you could try disabling the Imagify plugin altogether too.

If you’ve confirmed Imagify is the cause, here are a couple of suggestions we can try:

1) Try installing this helper plugin, which keeps the attributes on the img elements after the “Use picture tags” option replaces them with picture elements. I’m not sure if this will help, but it is at least worth trying:

https://github.com/wp-media/imagify-helpers/raw/master/webp/imagify-keep-attributes-on-img-tags/imagify-keep-attributes-on-img-tags.zip

2) If that doesn’t work, I believe BunnyCDN has an option for serving your WebP images as well (it also checks to be sure the browser supports WebP and serves the optimized JPG/PNG images if not). I found this guide for enabling that (you can ignore the parts about EWWW and skip to Configuring BunnyCDN section):

https://support.bunny.net/hc/en-us/articles/360020140992-Dynamic-WebP-Delivery-with-EWWW-Optimizer-on-WordPress

Follow the above guide and disable WebP display in your Imagify plugin settings page (but keep WebP creation enabled), then test to see if your variable images are working once again and that your WebP images are being displayed.

You can follow this guide for ensuring WebP images are being served (use the Rewrite Rules section): https://imagify.io/documentation/how-to-check-if-webp-image-is-displayed-on-your-site/.

Please let me know how this works for you, and I am happy to be of further assistance if needed!

Best regards,
Joseph

Hi @jtournier,

Sorry to hear nothing has worked so far!

As things currently stand, I can see that no images are being served on the page as WebP, so does that mean that both Imagify’s “Use picture tags” option and BunnyCDN’s WebP display are currently disabled?

It does appear that the variable products are now switching as they should, so I’m assuming that’s the case.

It’s interesting that both of the above options are causing things not to work. That makes me think this may not be related to the previous issue we talked about being resolved (that issue being specific to the “Use picture tags” option), and may instead be an issue related specifically to WebP images (since Imagify’s “Use picture tags” option and the BunnyCDN WebP display options work very differently).

I can’t be sure why the BunnyCDN option is causing issues, but if you would like to try re-enabling the “Use picture tags” option, I would be happy to try to take another look to see if there is anything else I can find.

Best regards,
Joseph

Hi Josh,

I took a deeper look into the code for these variable images and what is happening when I change to a new variation. I’ll explain what is happening rather than posting examples, as I’m not sure if you’d like this information to be made public for all (open your browser developer tools to the Elements tab, find the product image code and make a variation change to see what I’m seeing, if you’d like).

What I can see, is that there is a picture element with both a source and img element nested inside (as is supposed to be the case). However, while the img element is loaded with the srcset attribute with links to all the thumbnail sizes, the srcset attribute of the source element only has one link to the original image (not to any of the thumbnail sizes).

Also, when I change to a different variation, I’m seeing that the srcset of the img element is being updated with the variation image, but the source element is not. The source element is what is loading the WebP image on the page, so that’s overriding the srcset from the img element (which is the backup to load the JPG version if WebP is not supported by the user’s browser).

What I am also seeing when a variation is changed, is the img element is getting custom data-o_srcset and data-o_src attributes added. This is leading me to think that there may be some kind of lazy loading being applied that could be causing things not to work correctly. Or it’s possible you could have more than one service applying lazy loading, which can also cause issues.

Are you aware of anything lazy loading your images, such as a theme or another plugin? If so, please try disabling it to see if things might work better.

Aside from that, I’m not sure I have any other suggestions. I did test a quick variable product on my test site, and things are working as expected there, so I do believe this is something specific to your site.

If you can’t get this working, then it might be worth trying to contact BunnyCDN’s support to see if they could help you get WebP working via their display option.

Please let me know if you have any further questions on this and I’ll be very happy to assist however I can!

Best regards,
Joseph