Need to Hide Out-of-Stock Swatches Based on Selected Product using CSS & JS

I want to hide unavailable or out-of-stock swatches when selecting a product.
Right now, they are only blurred out.

As shown in the image, in the upper section I have two types of doors, and each door has different variation swatches, such as color and laminate shade.

Door 1 has 10 color shades

Door 2 has 15 color shades

I don’t want to display all the shades at once in the color swatch section, as it looks very cluttered.

So, I want to hide the out-of-stock or irrelevant swatches, so that each door only shows its own available variation swatches—not all of them.

Attachments:

You must be logged in to view attached files.

Hello,

Try to use the code below for help:

.wd-swatches-single .wd-swatch.wd-disabled {
    display: none;
}

Define it in Theme Settings -> Custom CSS.

Kind Regards

Thank you, thank you so, so much, Brother Luke!
But I have one concern.

As you can see in the image, the clear swatch button only appears at the end, after the final swatch selection.
However, as I mentioned earlier, I have 8 to 10 variation swatches, and I would like each variation swatch to have its own clear button.

This way, customers can clear any swatch at any stage without having to go through the entire selection process just to reset one option.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry, but there is no option in Theme Settings available for that.

It requires customizations, and this is beyond our limitations and support policy.

Kind Regards

Can you please provide the CSS class or JavaScript class that controls the behavior of the clear swatch button?
I’d like to share it with our developer so we can customize it.

The goal is to have a separate clear button for each variation swatch, instead of just one that appears at the end.
This will make it easier for customers to reset any selection without going through the full variation set.

Hello,

The “Clear” button functionality comes by default from WooCommerce so we can’t add it to each variation row.

The below custom CSS will help you to always show that button and you can clear the swatches at any time:

body .reset_variations {
    visibility: visible !important;
    opacity: 1 !important;
}

Kind Regards

[Author]

Posts