Customise the Add to Cart button on Collection page depending on variants and stock

Highlighted
Tourist
4 0 1

Hi Shopify magicians,

I've managed to get an Add to Cart button on my collection pages, I've even managed to get it to disable when a product is out of stock. Ideally I want to keep my collections pages quite clean so only want either Add to Cart, See Options or Out of Stock buttons. Unfortunately the products with variants are causing me some difficulty. For example, If one out of five variants are available then it disables the add to cart button. I found some code that will give me a drop down option for variants selection on the collection page itself but unlike many people in the community, I don't want a drop-down on the collections page when there are variants, just a 'see options' button that will take the customer to the product page where they can choose from the options for their item/s. If there are no variants then I just want the add to cart button. Obviously, if all products are out of stock then I'd just want an 'out of stock' button.

So far with all my tinkering the best I can do is end up with a drop-down or duplicated buttons on any product that has variants. 

To summarise, what I'm after is the following:

  1. IF product has variants AND any are available - DISPLAY “show options” button that links to product page
  2. IF product has variants AND all sold out – DISPLAY “out of stock” button that is disabled
  3. IF product doesn’t have variants AND is available – DISPLAY “add to cart” button with no redirect
  4. IF product doesn’t have variants AND is sold out – DISPLAY “out of stock” button that is disabled

The code I found that gives a variant drop-down option is:

<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">
    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
    </option>
  {% endif %}
  {% endfor %}
  </select>
  {% else %}
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  {% endif %}

  {% if product.available %}
    <button type="submit" name="add" id="AddToCart" class="btn btn-mini text-center" onclick="ga('send', 'event', 'Quick Add To Cart', '{{ product.type }}', '{{ product.title }}');">Add To Cart</button>
  {% else %}
<input type="submit" value="Sold Out" class="btn" disabled />
  {% endif %}
</form>

So far I've returned to using my original 'Add to Cart' code because it doesn't include a drop-down but it's far from ideal.

Any guidance would be greatly appreciated  

0 Likes