See Options button on Collection Pages for products with variants

[Shari_Pearce]

2.0 theme - showcase

website - www.unearthedcrystals.com.au

I have the below code running for our collection pages - it is set for products to add to cart and stay on-page, and sold out products to say sold out. Currently, for products with variants, they display in a drop-down if in stock (to add to cart with no redirect), and blank if out of stock. If all variants are out of stock the drop-down is blank and the button says sold out.

I would like to get rid of the drop-down altogether on products with variants and have these products have a button that says 'see options' and take them to the product page instead.

Can anyone help with editing this?

@oscprofessional could you assist? 🙂

<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="quick-add-to-cart small--hide clearfix">

{% if product.variants.size > 1 %}

  <select id="product-select-{{ product.id }}" name='id' class="text-center">

  {% 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 }}</option>

  {% else %}

    <option disabled="disabled">

    </option>

  {% endif %}

  {% endfor %}

  </select>

  {% else %}

    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />

  {% endif %}

  {% if product.available %}

   <input type="submit" value="Add to cart" class="btn" />

  {% else %}

<input type="submit" value="Sold Out" class="btn" disabled />

  {% endif %}

</form>