How can I modify the display of sold out items on Taste Theme?

[Cassandracabal]

Hi Im trying to change the way a sold out product looks on my website. Currently someone only knows if a size is sold out if they click on it… I would rather the size be grayed out/ crossed out as an option if it’s not available. Please see attached for reference.

anyone know how to customize this? Thanks.

[nidhipatel]

Hi @Cassandracabal ,

I have reviewed the taste theme code and I came to know that you can achieve the requirements after adding a custom code to the theme. I believe this can help you to resolve the issue.

Please add the below code in the main-product.liquid:

{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available  %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}

Please also add the below CSS in the base.css file:

.product-form__input input[type=radio]:checked+label.disabled {
    background-color: gray;
  }
.product-form__input input[type=radio]:checked+label.disabled:before {
    position: absolute;
    content: "";
    left: 50%;
    top: 0;
    bottom: 0;
  	right:unset;
  	z-index: 1;
    border-left: 1px solid;
    border-color: #1f2021;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Please check the below-attached screenshot:

Thank you.