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

Question

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?

Thanks

Try following this tutorial it doesn't show the flex theme but you should find a theme on there with similar files, just have a look through the then follow the tutorial. — Insula

koosa koosa · Accepted Answer · 2021-02-10T19:29:42

Something like this would work:

{% if product.available == false %}
    <span>Out of Stock</span>
{% elsif product.has_only_default_variant %}
    <form method="post" action="/cart/add">
        <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
        <input type="submit" value="Add to Basket" class="button ajax-submit action_button button--add-to-cart" />
    </form>
{% else %}
    <a href="{{ product.url }}">Choose option</a>
{% endif %}

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

1 Answers