Strike through on out of stock products on variant dropdown

1 0 0

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 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!



Reply 1 (1)

Shopify Partner
1 0 0

@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-{{ }}-{{ forloop.index0 }}">
            {{ }}
          <div class="select">
              id="Option-{{ }}-{{ forloop.index0 }}"
              name="options[{{ | escape }}]"
              form="{{ product_form_id }}"
              {% render 'product-variant-options', product: product, option: option, block: block %}
            {% render 'icon-caret' %}
      {%- 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-{{ }}-{{ forloop.index0 }}">
            {% if option.available %}
              {{ }}
            {% else %}
              <span class=".strikethrough">{{ }}</span>
            {% endif %}

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