how to make the sold out variation hide grey and unclickable instead of lines through?

[michelle012]

Does someone know how i can make the sold out variant on the product page grey-fade and unclickable?

[BSSCommerce-HDL · Accepted solution]

Hi @michelle012, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.radio__button .sold-out+label:before {
       background: #00000000 !important;
}

span.radio__button:has(.sold-out) label > span {
    color: gray !important;
}

span.radio__button:has(.sold-out) label {
    pointer-events: none;
}
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[michelle012]

is there also a solution to make the swatch color grey- fade when sold out?

[BSSCommerce-HDL]

For swatch you can use this code

<style>
        .swatch__button:has(.sold-out) > label {
           --swatch: #c8c8c8!important;
            pointer-events: none!important;
        }
</style>

[BSS-TekLabs]

- Here is the solution for you @michelle012 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.radio__button .sold-out+label:before, .radio__button .unavailable+label:before {
    background: no-repeat !important;
}
.radio__button .sold-out+label {
 background: darkgray !important;
}
.radio__fieldset .radio__button label {
 min-width: 40px !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.