Can UI/UX show a cross through out of stock variations?

[KL-Swimwear]

Hello Shopify experts!

I would like to know if there is a way to have the UI/UX show a cross through variations that are out of stock?

For instance if (M) Medium is out of stock then I would like it to show a cross through it.

[Simonsron]

In the place of your loop variant add

{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
<div>
//Normal variant item
</div>

{% else %}
<div class="soldOut">
//sold Out variant item
</div>
{% endif %}
{% endfor %}

Then write a css for your sold out

.soldOut{
            position: relative;
        }
        .soldOut::after{
            content: "";
            width: 70%;
            height: 1px;
            background-color: #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotate(20deg) translate(-50%,5px);
        }
        .soldOut::before{
            content: "";
            width: 70%;
            height: 1px;
            background-color: #000;
            position: absolute;
            top: 15%;
            left: 50%;
            transform: rotate(-20deg) translate(-50%);
        }

[KL-Swimwear]

I'm still learning exactly where to place these codes exactly. So when you say in place of your loop variant means I need a few more steps to find and understand the loop variant please!

[Simonsron]

Since I don't know your exact code either, that's as far as I can help you.

If you can't find it and need my help, you can contact me.

[KL-Swimwear]

So I've been giving it a shot but no luck, I have a strikethrough but it is gray and ideally would like just to change that colour to a prominent red and maybe thickness so customers can see it very easy

I'm using the Ride 8.0.0 theme.