Variant management question

Good morning, we’ve noticed that, in the e-commerce clothing store of our client, if a product has the color and size attributes, when only one color variant is available, clicking on it doesn’t display the sold-out sizes as “not available” (with a red cross). To see if a size is actually available, I have to click on it, and the word “available” or “sold out” appears.

Is it possible to make the unavailable sizes immediately appear (by placing a red X over the others) when selecting the color attribute, as happens when more than one color is available?

Please take a look to screenshots to better understand what we are talking about.

Also: is it possible to deselect an attribute by double-clicking it? If the product has a video, for example, selecting a color will show photos of the variations, but to view the video again, you’ll also need to select a size to make the “delete” button appear.

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

01. Navigate to Products > Attributes > edit attribute > Choose the disabled swatch. The disabled Swatch style is for the variants of the Products that are disabled, not for the Out of Stock variants. So, you need to have the variant of the Product not checked with the Enable option on it and then the Disabled Swatch style will work accordingly.

See these images for reference:
https://snipboard.io/BMehIF.jpg
https://snipboard.io/NbOzfP.jpg

02. By default, WooCommerce does not support deselecting an attribute by double-clicking. The standard behavior for variable products is:

Once an attribute is selected, the variation images replace the main gallery. To return to the original product state, the customer must use the “Clear” / “Reset variations” button.

The reset button typically appears after all required attributes (e.g., Color and Size) are selected.

Best Regards,

Thank you for your reply.

So the “problem” is this: The disabled Swatch style is for the variants of the Products that are disabled, not for the Out of Stock variants…

Is it possible to enable the disabled swatch style also for “out of stock” variant as well?It’s easier and quicker for a customer who has this type of information.

Regarding point #2, is not possible to make the “clear” button appear after clicking the first attribute?Probably not because is controlled directly from WooCommerce. Do you have any solution for it?

Best regards.

Hello,

01. Navigate to WooCommerce > Settings > Products > Inventory > enable the option“Hide out of stock items from the catalog” then it will work for out of stock variations.

02. You are correct — the “Clear” / “Reset variations” button behavior is controlled by WooCommerce core. By default, it only appears after all required attributes are selected, so it cannot appear immediately after selecting the first attribute.

Best Regards,

We have the same issue. We selected the “Disabled swatch style” in the product attributes color and size and have set the woocommerce setting to “hide out of stock items”. When I check the DOM all variations have CSS class “wd-enabled” even though some of them are not in stock and some are not even enabled. Our store has up to 150 variations per product.

Attachments:

You must be logged in to view attached files.

Followup: Problem solved. The “AJAX variation threshold” was too low, as we have up to 150 variations per product. The default was 30.

Hello,

@benlau.de

Thanks for the update. Glad to hear you found it.

Feel free to write back anytime. If you need further assistance, we are always here to help you.

Best Regards,

[Author]

Posts