Delete a specific product variant inside the dropdown menu

Question

I wonder if it is possible to remove a specific product drop-down page and display it inside a tag <p>or just a regular line? Imagine that I have 3 product options:

• Colour
• The size
• A type

We all know that all these parameters will be displayed in the drop-down menu. How about how I wanted to display the parameter Sizeas a regular string or text? How can we do this?

Here's an image to make it clearer.

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>

Answer 1

I just found the answer for this. I will post it here to help others with the same problem as me.

In the 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 --->

Answer 2

product.liquid, LI Text, . 😃