Change Add to Cart to Choose Option for variant product in collection page

cs73
New Member
6 0 0

I have managed to add an Add to Cart button to my collection page in the Flex theme from Out of the Sandbox. However, for variant products, when you click on the Add to Cart, it automatically adds the default variant product to the Cart. I would like to change this so that instead of "Add to Cart" it displays "Choose Option" on the button and when clicked it takes you to the product page, where you then have to select the variant before adding this to the cart. 

My code for the Add to Cart button is:

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="{% if product.variants.first.available%}Add to Basket{% else %}Out of Stock{% endif%}" class="button ajax-submit action_button button--add-to-cart" {% unless product.variants.first.available %}disabled{% endunless %} />
</form>

Can anyone help with this?

0 Likes