Can I mark sold out sizes with an X on my website?

[vladescupetrut]

Hello there, i would like to know if its possible to make an size "S, M, L, XL, XXL" if there one of them its unavailable to be marked with X like in the second screenshot, in the first one its my website.

and the second one with the X marked on the sold out ones:

Thank you!

[Salil17]

Add this loop in variant class -

{% for variant in product.variants %}

{% if variant.available == false %} 

cross-mark

{% endif %}

Then add the style

.cross-mark:before { content: "x"; position: absolute; top: 5px; right: 5px;  color: black; }

{% endfor %} 

Was my reply helpful? Please Like and Accept Solution. This mean a lot to me.

[vladescupetrut]

hmm, can you please be more specific where to put exactly these code ?

[Salil17]

The above code goes in the product section, where the variant  is loading. you can add the style part on top of the section.

[vladescupetrut]

that doesnt mean to put on every product that codes ? i have 200+ products, we cannot find a solution to put it in the theme codes ?

[vladescupetrut]

or something like this website,

[Salil17]

you need to put this in just one section, which is product.liquid or some thing similar. In that also you have to figure out where the variants are loading. 

[vladescupetrut]

[Salil17]

main-product

[vladescupetrut]

I can put the codes below anywhere in the main-product.liquid ?

{% for variant in product.variants %}

{% if variant.available == false %} 

cross-mark

{% endif %}

.cross-mark:before { content: "x"; position: absolute; top: 5px; right: 5px;  color: black; }

{% endfor %} 

[Salil17]

Try to find input type="radio" and then add a

class="

{% for variant in product.variants %}

{% if variant.available == false %} 

cross-mark

{% endif %}

{% endfor %} 

"

and 

This part put put on top of the section

<style>

.cross-mark:before { content: "x"; position: absolute; top: 5px; right: 5px;  color: black; }

</style>

[vladescupetrut]

I couldn't find