Ad

Remove Specific Product Option Inside A Dropdown

- 1 answer

I wonder if is it possible to remove specific product option dropdown and display it inside a <p> tag or just a normal string? Imagine I have 3 product options:

  1. Color
  2. Size
  3. Type

We all know that all those options will be displayed inside a dropdown menu. What about like I wanted to display the Size option as a normal string or text? How can we do that?

Here's an image to make it clearer.

enter image description here

product.liquid

<select name="id" id="ProductSelect" class="product-single__variants">
   {% for variant in product.variants %}
   {% if variant.available %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}    </option>
   {% else %}
      <option disabled="disabled">
         {{ variant.title }} - {{ 'products.product.sold_out' | t }}
      </option>
   {% endif %}
   {% endfor %}
</select>
Ad

Answer

I just found the answer for this. I'll post it in here to help others with the same problem as I have.

In product.liquid:

<!--   product options -->
   {% capture option_titles %}Size,Flavor{% endcapture %}

      {% assign option_titles = option_titles | split:',' %}
         {% for option in product.options %}
           {% if option_titles contains option %}
           {% capture option_index %}option{{ forloop.index }}{% endcapture %}
           {% assign option_values = product.variants | map: option_index | uniq %}
           {% if option == 'Flavor' and option_values.size > 1 %}
            <label for="option">{{ option }}</label>
            {{ option_values | join:', ' }}
           {% elsif option_values.size == 1 %}
            <label for="option">{{ option }}</label>
            {{ option_values }}
           {% endif %}
          {% endif %}
         {% endfor %}
<!--  end product options --->
Ad
source: stackoverflow.com
Ad