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

Store Design
, ,
2

In the place of your loop variant add

{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}

//Normal variant item

{% else %}

//sold Out variant item

{% 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%);
        }