Home New Guten › Forums › WoodMart support forum › Need to Hide Out-of-Stock Swatches Based on Selected Product using CSS & JS

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 9, 2025 at 8:25 am #666070

    akash.work.manualcontrol
    Participant

    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.
    June 9, 2025 at 12:40 pm #666164

    Luke Nielsen
    Keymaster

    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

    June 10, 2025 at 10:50 am #666458

    akash.work.manualcontrol
    Participant

    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.
    June 10, 2025 at 10:59 am #666462

    Luke Nielsen
    Keymaster

    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

    June 10, 2025 at 11:09 am #666463

    akash.work.manualcontrol
    Participant

    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.

    June 11, 2025 at 9:57 am #666646

    Luke Nielsen
    Keymaster

    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
Viewing 6 posts - 1 through 6 (of 6 total)