WoodMart Variation Image swatch conflict

The Problem:
On variable products using two attributes—Color (color) and Size (megethos)—clicking on a color swatch fails to update the main product gallery image (on the single product page) or the thumbnail image (on the product grid) unless a size is selected first.

Technical Analysis:

The WooCommerce Dependency Lock: By default, WooCommerce native scripts do not trigger the found_variation event until a complete and unique variation combination is chosen (Color + Size). Because clicking a color swatch leaves the size undefined, WooCommerce blocks the image change.

The Swatch/Slider Conflict: WoodMart handles advanced swatches beautifully, but because the theme’s slider gallery (Slick/Owl) relies on native WooCommerce events to track variations, the gallery stays frozen on the initial image.

The Multilingual Selector Miss: Standard scripts looking for generic attributes like size fail to find the elements because the size attribute uses the Greek localization pa_megethos.

The Impact on User Experience:
Customers clicking different color swatches see no visual response from the main gallery. They assume the color switches are broken or that different color photos do not exist, unless they happen to choose a size first.

Our Temporary Workaround:
To bypass this without breaking the checkout flow, we applied a custom jQuery script to the front-end. The script intercepts clicks on the color swatches and forces a pure visual image update by copying the swatch’s image URL directly to the visible gallery wrapper, completely leaving the pa_megethos form state alone so users are still forced to select their correct size before adding to the cart.

Unfortunately, our temporary code fixed the issue on product grid but not on single product. Needs a solution to be found on this conflict.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

Hello, this doesn’t happen to only one website. It happens to all websites that have color and size variation.

Extra info

Hello,

What you are seeing is actually standard WooCommerce variation behavior, not a theme issue.

WooCommerce only triggers the found_variation event (which updates the product image and gallery) when a complete valid variation combination is selected — in your case both Color + Size. When only Color is selected, WooCommerce does not consider it a valid variation yet, so the image update is intentionally not fired. This is the intended and stable WooCommerce behavior that WoodMart fully supports.

Best Regards

Hello WoodMart Support Team,

Thank you for the explanation. I completely understand that by default, vanilla WooCommerce acts as a strict data matrix and requires a complete, valid combination (Color x Size) to trigger the found_variation event and change the image.

However, leaving the main gallery completely frozen when a shopper clicks a visual image swatch creates a poor user experience. Customers assume that other color photos do not exist if the slider doesn’t move. Many modern premium themes intentionally include wrapper scripts to bypass this default WooCommerce limitation to keep the UX smooth.

Furthermore, there is a clear bug regarding how WoodMart handles out-of-stock items in this matrix:

1. When a user clicks a color swatch, if the first chronological size in the database (e.g., XS) happens to be out of stock and crossed out, WoodMart’s swatch script completely locks up.

2. Even if the user subsequently clicks an in-stock size (like M or L), the main gallery remains frozen on the wrong color image. The script fails to clear the initial out-of-stock error state.

Since WoodMart is a high-end, premium e-commerce theme, does your development team have a recommended PHP snippet for functions.php or an official theme filter that can force the main gallery slider to update on a single attribute click and resolve this out-of-stock lockup?

Thank you, I look forward to your dev team’s input!

Hello,

This is actually the default WooCommerce behavior for variable products.

We recommend checking the same scenario using a default theme like Storefront, so you can see how WooCommerce handles variations without any theme influence.

To achieve the behavior you are looking for, you will need to use a custom solution, as this is not controlled by WoodMart itself.

You can follow this guide and apply a custom code snippet if required:
https://gist.github.com/BHare1985/f9c409c825822b769c06397bfc8b84cc?permalink_comment_id=4783121
Hope this helps.

Best Regards

Hello,

Thank you for the update. I understand that this tracks back to vanilla WooCommerce behavior, but as a long-time agency user with multiple active WoodMart licenses every year, I strongly feel that a premium theme providing custom visual swatches should gracefully handle out-of-stock variations natively rather than letting the UI lock up for the user.

Testing on Storefront isn’t ideal for a live client site, so I have went ahead and written a custom jQuery matrix-solver that hooks into data-id=”pa_color” and automatically shifts the active size selection to the first available in-stock variation when a color is changed. It works perfectly now.

I hope the development team MUST consider adding native, smart variation filtering to future updates of WoodMart so we don’t have to deploy custom JS workarounds for our clients.

You can close this ticket.
Thanks!

Hello,

For any feature request, you can create a feature request here – https://woodmart.userjot.com/ so our developers can take it into account.

Best Regards

[Author]

Posts