BugWP logo BugWP
Back to Community
Home / Community / Plugin → Imagify image optimization – optimize images | compress images | convert webp | convert avif

Fixing WooCommerce Variation Image Issues with Imagify's WebP Display

23 threads Sep 16, 2025 Plugin → Imagify image optimization – optimize images | compress images | convert webp | convert avif

Content

Many WooCommerce store owners using the Imagify Image Optimization plugin have reported a common issue: product variation images stop changing when customers select different options (like color or size). This guide explains why this happens and provides practical solutions to resolve the conflict while maintaining image optimization.

The Core Problem: WebP Display with Picture Tags

Based on numerous community reports, the issue consistently occurs when Imagify's "Use <picture> tags" WebP display method is enabled. This method replaces standard <img> tags with more complex <picture> elements to serve next-gen formats like WebP. Unfortunately, this HTML restructuring can interfere with how WooCommerce's JavaScript handles image swapping for product variations.

The conflict appears to affect various themes and additional plugins like variation swatchers or gallery modules. The common symptom is that the main product image remains static instead of switching to display the selected variation's image.

Effective Solutions to Try

Solution 1: Switch to Rewrite Rules Method

The most recommended solution is to change how Imagify delivers WebP images:

  1. Go to Settings > Imagify in your WordPress dashboard
  2. Navigate to the WebP section
  3. Change the display method from "Use <picture> tags" to "Use rewrite rules"
  4. Save changes and clear any site cache

Important Note: This method only works if you're not using Cloudflare, another CDN, or NGINX caching, as these can interfere with rewrite rules.

Solution 2: Temporarily Disable WebP Display

If rewrite rules aren't an option for your setup:

  1. Go to Settings > Imagify
  2. Under the WebP section, disable "Display images in next-gen format on the site"
  3. Save changes and clear cache

This will maintain your image compression benefits while resolving the variation switching issue.

Solution 3: Use a Helper Plugin (Advanced)

Some users have reported success with a helper plugin that maintains img element attributes when using picture tags. This approach requires technical comfort with adding custom code to your site.

Long-Term Outlook

The Imagify Image Optimization team has acknowledged this compatibility issue on their GitHub repository. While there's no confirmed timeline for a permanent fix, they continue to investigate solutions that would allow picture tags to work seamlessly with WooCommerce variations.

In the meantime, the solutions above have helped numerous store owners maintain both image optimization performance and proper WooCommerce functionality. Remember to always test changes on a staging site before implementing them on your live store.

Related Support Threads Support