WP Manifestindependent plugin directory
manifest / ecommerce / webp-gallery-fix-for-woocommerce

WebP Gallery Fix for WooCommerce

Fixes WooCommerce product gallery display when WebP/AVIF images are served via picture tags

by Renzo Johnson · github.com/renzojohnson/webp-gallery-fix-for-woocommerce · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/renzojohnson/webp-gallery-fix-for-woocommerce/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/renzojohnson/webp-gallery-fix-for-woocommerce ↗

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