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

[cs73]

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?

[Michal17]

You have an issue with your code where you have put hidden id with a value of the product.variant.first.id
You need to update it.
Please contact me to know how to fix this.

[cs73]

What difference will this to the different buttons displaying?

[Michal17]

The button will not have any issue with it.
The main thing is which variant id you are adding to the cart.
Here is your code you have one static id which is passed to cart so it will only add it,
The user will not have any choice in it.
So you need some dropdown thing.

[cs73]

Thanks for your feedback.

I don't really want a dropdown there as some of the products have 20+ variants. I just want the Add to Cart button to become a Choose Option button instead, which then takes them to the product page. In the product page we have colour swatches enabled which show all the different shades, so they can choose the one they want from there.

Thanks.

[Michal17]

This one is also simple. You just need to make the add to cart button an anchor link and need to remove the form code.