CommerceKit is fully compatible with the EWWW Image Optimizer plugin, however certain EWWW image delivery methods can interfere with WooCommerce variation image updates – which is noticeable on product pages.
Symptoms
You may notice one or more of the following:
- Product variation images do not update correctly when selecting attributes.
- The wrong image remains visible after changing a variation.
- WooCommerce variation galleries appear stuck on the default image.
- Browser developer tools show
<picture>and<source>elements wrapping product images.
Why this happens
WooCommerce updates variation images dynamically using JavaScript.
When a customer selects a variation, WooCommerce replaces the product image in the page markup with the correct variation image.
Some EWWW image delivery modes rewrite images by injecting additional <picture> and <source> elements into the page.
For example:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="">
</picture>
Modern browsers prioritize the
<source> element inside the <picture> tag over the underlying <img> element.
As a result, WooCommerce may successfully update the image, but the browser continues displaying the image provided by the injected <picture> element.
The browser is using the EWWW-generated markup instead of the dynamically updated WooCommerce image.
Option 1: Disable Picture Tag WebP Delivery
We recommend disabling EWWW’s Picture WebP delivery method.
Native WebP browser support is now effectively universal across modern browsers, making picture-tag rewriting largely unnecessary.
Disabling this feature prevents EWWW from injecting additional markup and allows WooCommerce variation image updates to work correctly.
Option 2 (Recommended): Use Cloudflare Images
We strongly recommend using The CommerceGurus Turbo in-built Cloudflare Images integration instead. Benefits include:
- Automatic image optimization
- Automatic WebP delivery
- AVIF support
- Reduced server processing
- Smaller image file sizes
- No image rewriting in page markup
- Better compatibility with WooCommerce variation galleries
And another huge advantage – image transformations are performed by Cloudflare’s edge network rather than your hosting server.
Alternative EWWW configuration
If you prefer to continue using EWWW Image Optimizer, consider using its rewrite-rule based WebP delivery method instead of picture tag rewriting.
This approach serves WebP images at the server level without modifying page markup. Benefits include:
- Better compatibility with WooCommerce variation images
- Reduced HTML output
- Improved page efficiency
- Transparent image delivery
Depending on your hosting environment, you may need additional Apache or NGINX rewrite rules. Refer to EWWW’s documentation for implementation details.
Performance Considerations
Picture-tag based WebP delivery was a common technique several years ago when browser support for WebP was limited.
Today, browser support for WebP exceeds 95% of active users, making this approach much less necessary.
In addition to potential compatibility issues, picture-based delivery also increases page HTML size because every image requires additional markup.
For most modern WooCommerce stores, server-level WebP delivery or Cloudflare Images provides a cleaner and more efficient solution.
