How can I hide non-existent product variants from my listings?

[room1021]

Hello,

I sell a shirt in adult, youth, and toddler sizes. I would like to have it all on one product listing. When I delete the variants that are non existent (example, Adult - 2T) it still shows up as out of stock on my website. Any idea how to have this not happen? When I click each style, I would like it to only show up the sizes I actually carry.

[LitExtension]

Hi @room1021,

Go to Assets > theme--async.css and paste this at the bottom of the file:

.radios--input[data-item=radio][data-unavailable=true]+.radios--value-button,
.radios--input[data-item=radio][data-unavailable=true]+label[data-item=swatch] {
    display: none !important;
}
.radios--input[data-item=radio][data-unavailable=true] {
    display: none !important;
}

Hope it helps!

[room1021]

Hi!! Thanks so much for your help. It is a little better but still not 100%
right. Here is the page I am trying to fix if that helps.
https://room1021.com/products/chocolate-milk-club-tee

[gr_trading]

Hi @room1021 ,

Please add below script in your product liquid, can't tell you exact name of file because paid themes don't allow to view their structure in trial period.

<script>
document.querySelector('product-options-root[data-id="7741020569842-template--16218546077938__main"]').addEventListener('change', function(event) {
    
    var cbox = this.querySelectorAll(".radios--input");//.removeAttribute('style');
    for (let i = 0; i < cbox.length; i++) {
         cbox[i].parentElement.style.display='block';
     }
    var _unlist =  this.querySelectorAll("[data-unavailable]");
    if(_unlist != null){
        console.log(_unlist,_unlist.length,_unlist.parentElement);
        for(var _k= 0; _k < _unlist.length; _k++){
            _unlist[_k].parentElement.style.display='none';
        }
    }
});
</script>