WebP Gallery Fix for WooCommerce

=== WebP Gallery Fix for WooCommerce === Contributors: renzojohnson Tags: woocommerce, webp, gallery, picture, variable products Requires at least: 5.8 Tested up to: 6.8 Requires PHP: 7.4 Stable tag: 1.0.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html

Fixes the WooCommerce product gallery display when WebP or AVIF images are served using the picture tag method.

== Description ==

When WebP optimization plugins like Imagify, ShortPixel, or WebP Express serve images using the HTML5 <picture> tag method, WooCommerce's product gallery breaks on variable products — the gallery keeps showing the wrong image after switching variations.

This happens because WooCommerce's variation JavaScript updates the <img> element attributes when you switch between product variations, but it does not update the <source> elements inside the <picture> tag. Since browsers prefer <source> over the <img> fallback, the gallery continues displaying the old image.

This lightweight plugin fixes the issue by syncing all <picture> sources with the updated image whenever a variation is selected.

What it fixes:

• Product gallery shows wrong image after switching variations
• Gallery zoom displays the old image instead of the selected variation
• Stale WebP/AVIF source shown after variation change or reset

Compatible with:

• Imagify
• ShortPixel Image Optimizer
• WebP Express
• EWWW Image Optimizer
• Converter for Media
• Any plugin that uses the <picture> tag method for WebP/AVIF delivery

How it works:

The plugin adds a small JavaScript file (~1KB) to single product pages. It uses a MutationObserver to detect when WooCommerce updates the <img> attributes, then syncs all <picture><source> srcsets automatically — including both WebP and AVIF sources. Zero jQuery dependency.

No settings needed. Just activate and the fix is applied automatically.

== Installation ==

1. Upload the plugin files to /wp-content/plugins/webp-gallery-fix-for-woocommerce/
2. Activate the plugin through the 'Plugins' screen in WordPress
3. That's it — the fix is applied automatically on single product pages

== Frequently Asked Questions ==

= Do I need to configure anything? =

No. The plugin works automatically once activated. There are no settings to configure.

= Does this plugin replace the WooCommerce gallery? =

No. It patches the existing WooCommerce product gallery to work correctly with <picture> tags. No gallery replacement needed.

= Does this fix the lightbox too? =

The WooCommerce lightbox (PhotoSwipe) reads image data from data-large_image attributes, which WooCommerce already updates correctly on variation change. The lightbox is not affected by this bug — only the inline gallery display is. This plugin fixes the gallery display.

= Will this slow down my site? =

No. The plugin loads a single ~1KB JavaScript file only on single product pages.

= What about AVIF images? =

Yes, the plugin syncs both WebP and AVIF <source> elements inside <picture> tags.

= What if WooCommerce fixes this in a future update? =

The plugin checks for <picture> tags before acting. If WooCommerce updates their variation JS to handle <picture> elements natively, this plugin will simply have nothing to fix.

== Changelog ==

= 1.0.0 =

• Initial release
• Syncs all picture source srcsets on variation change (WebP + AVIF)
• Syncs all picture source srcsets on variation reset
• Delegated MutationObserver handles dynamically added gallery images
• Compatible with WooCommerce 3.0 through 10.6