Strike through on out of stock products on variant dropdown

[bethanyalice]

Good Morning

I'm just after some help. Trying to add a strikethrough to out of stock variants (colours) of a product, on the dropdown menu, instead of it just saying "blue-unavailable" I would prefer it as "blue". The theme is Craft and the website url is www.lucylocketland.com. I have currently changed it back to the pills as that is what the owner would prefer unless we can manage a strike through on the drop down!

Any pointers would be much appreciated!

Thanks

[BinaryCurator]

@bethanyalice if you look under product-variant-picker.liquid and look under line 48, the variant option names are getting populated within the dropbox.

{%- for option in product.options_with_values -%}
        <div class="product-form__input product-form__input--dropdown">
          <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <div class="select">
            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {% render 'product-variant-options', product: product, option: option, block: block %}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
      {%- endfor -%}

  
the option under product.options_with_values has a property on it called available. You could use that to conditionally apply the strikethrough on your option through a css class.

<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {% if option.available %}
              {{ option.name }}
            {% else %}
              <span class=".strikethrough">{{ option.name }}</span>
            {% endif %}
          </label>

You may need to create a css class specific to the option in the selector.