Picture mode doesn’t work for product variations

Resolved Hiriji
(@hiriji)

2 years, 5 months ago
Hi there,

I discovered last night that Imagify does not seem to work for product variation images on WooCommerce. I am not sure if this is related to the latest version of WC, or perhaps WP 5.5, but the image doesn’t change when selecting a variation when using the <picture> setting.

Any ideas of how to resolve this?

I’ve loaded a clean install of WP and WC without any other plugins – issue can be replicated in the shared link.
- This topic was modified 2 years, 5 months ago by Hiriji.
- This topic was modified 2 years, 5 months ago by Hiriji.
- This topic was modified 2 years, 5 months ago by Hiriji.
The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author WP Media
(@wp_media)

2 years, 5 months ago

Hi @hiriji!

This is Joseph from Imagify, and I’ll gladly assist you here!

Sorry you’re having image display issues and thank you for the link to the example page!

There are a few reasons WebP will not be displayed if using the “Use <picture> tags” option option:
• Background images defined in CSS code
• Theme loads HTML elements after Imagify crawls source code to apply WebP markup
• Script targets element rather than <picture> elements
• There is no WebP version of image generated
• Images hosted externally (not on your server)

In looking at your test page, it seems it’s either the 2nd or 3rd from the list above.

So long as you do not use a CDN or Cloudflare (as it appears you do not), there is a solution that will likely work for you. In Imagify settings, try changing “Use <picture> tags” option to “Use rewrite rules” and see if your issues are resolved.

You’ll want to test how your pages and images are displaying after enabling the “Use rewrite rules” option as there are also a few situations where WebP will not be displayed using this option too:
• mod_rewrite is not active on the server (Apache)
• You are on NGINX server and didn’t apply custom rules to nginx.conf file manually
• No WebP version of image (check by opening the image in browser and append “.webp” to its URL
• Images hosted externally (not on your server) so they can’t be rewritten

It’s worth noting that using the rewrite rules option will result in your HTML code appearing to display the JPG or PNG versions of images, though the rewrite rules work to ensure the WebP images are actually being served to users’ browsers. You can follow this guide for ensuring WebP images are being served: https://imagify.io/documentation/how-to-check-if-webp-image-is-displayed-on-your-site/.

If this option doesn’t work for you either, then it’s possible WebP image display may not be possible given your site’s specific setup. Let me know how it goes, and if you have any more questions on this, I’m happy to assist!

Best regards,

Joseph

Thread Starter Hiriji
(@hiriji)

2 years, 5 months ago

Thank you for the feedback Joseph I really appreciate it.

So switching to the rewrite method did fix this on my production site yesterday and it worked to fix the WooCommerce issue but I would have preferred to use the <picture> option in the long run.

Many people use variation products in WooCommerce and would likely want this as a feature too in the future, perhaps worth considering?

Thanks!

Plugin Author WP Media
(@wp_media)

2 years, 5 months ago

Hi @hiriji!

Glad changing this option worked for you, and thank you for your feedback on this as well! We are always working to improve Imagify, and getting the “Use <picture> tags” option to work better with WooCommerce is definitely something we will consider going forward!

Best regards,

Joseph

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Picture mode doesn’t work for product variations’ is closed to new replies.

Views