Add To Cart button Grey out on out of stock variant

New Member
12 0 0

I have a shopify store where when if a product variant was out of stock then when selected the 'add to cart' button would grey out so you could not select it. For some reason this has stopped happening.

Thr product.liquid is below .... Is anybody able to advise why the grey out may stopped happening.


<!-- /templates/product.liquid -->
{% comment %}

  Rich snippets (itemscope, itemtype, etc.) for products are a theme requirement,
  and allow search engines to easily understand what the content is.

  For more information on these tags, visit:
{% endcomment %}

<main role="main" class="main productSingle" itemscope itemtype="">

    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
    <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

    {% include 'product-single-images' %}
    {% include 'product-single-info' %}


<aside class="productGrid productGrid--related">
    {% include 'related-products' %}

{% comment %}
  To take advantage of a callback on the select dropdown, add option_selection.js
  and customize the JS in timber.productPage as needed.

  Currently, timber.productPage does the following:
    - Hides your <select> tag from above
    - Breaks out the product variants into separate product options, if more than one exists
    - Generates a <select> tag for each product option
    - Enables/disables elements based on variant availability

  Callback notes:
    - Keep the callback available to the global scope (window.selectCallback) so that advanced
      addons can override it.
      * E.g. multiple currencies
{% endcomment %}

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{{ 'fastclick.min.js' | asset_url | script_tag }}
{{ 'timber.js' | asset_url | script_tag }}

var add = document.querySelector('[data-add-cart]');

var selectCallback = function(variant, selector) {

        money_format: "{{ shop.money_format }}",
        variant: variant,
        selector: selector

     // if (variant) {
    //     // Selected a valid variant that is available.
    //     if (variant.available) {
    //         // Enabling add to cart button.
    //         jQuery(add).removeClass('disabled').prop('disabled', false).text('Add to Cart').fadeTo(200,1);
    //     } else {
    //         // Variant is sold out.
    //         jQuery(add).text('Sold Out').addClass('disabled').prop('disabled', true).fadeTo(200,0.5);
    //     }
    // } else {
    //     // variant doesn't exist.
    //     jQuery('#ProductPrice').empty();
    //     jQuery(add).text('Unavailable').addClass('disabled').prop('disabled', true).fadeTo(200,0.5);
    // }

var validateQty = function (qty) {
    if((parseFloat(qty) == parseInt(qty)) && !isNaN(qty)) {
    } else {
        qty = 1;
    return qty;

jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
       product: {{ product | json }},
       onVariantSelected: selectCallback,
       enableHistoryState: true

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
    {% endif %}

    $('.js-qty__adjust').on('click', function() {
        var $el = $(this),
            id = $'id'),
            $qtySelector = $el.siblings('.js-qty__num'),
            qty = parseInt($qtySelector.val().replace(/\D/g, ''));

        var qty = validateQty(qty);

        // Add or subtract from the current quantity
        if ($el.hasClass('js-qty__adjust--plus')) {
            qty += 1;
        } else {
            qty -= 1;
            if (qty <= 1) qty = 1;

        // Update the input's number



Shopify Expert
9922 76 1440

A line with // preceding them in JavaScript are commented out (aka: ignored). I see commented lines with code that sets button states to disabled. The CSS in the theme probably used the disabled state as a selector (so if disabled, use this style).

I assume those lines have been edited for a reason though so won't be too quick to tell you to remove the //.

I'd made a new theme copy, remove the comments from the code in the copy. That will at least let you see the result without breaking the live store.

In the future it will also be useful to see a link to your store. Without it, the forum members will be largely guessing.

★ Winning Partner of the Build a Business competition. ★
New Member
12 0 0

Thank you for your response Jason

I see what you saying but the strange thing is to the best of our knowledge those lines have always been commented out.

I tried removing the comments but this made no difference. I am a bit of a loss of where to go next with this and dont really want to link to the store.

ANy other thoughts, they are greatly appreciated!

Shopify Expert
9922 76 1440

Without a link to the live store - everything from this point will be a guess.

Please post a link to the store so the members can view the page in action.

★ Winning Partner of the Build a Business competition. ★
New Member
12 0 0

Out of interest I have looked at the ( see below ) and made the following change but this removed the add to cart button all together rather than just when a variant is out of stock. Is any body able to assist with this?

{% if variant.available == true %}
  <input type="submit" name="add" value="Add to Cart" id="add" class="primary" />
{% endif %} ( see below )

<div class="productSingle__info productInfo" itemprop="offers" itemscope itemtype="">
    <div class="productInfo__wrap">
        <h1 class="productInfo__title" itemprop="name">{{ product.title }}</h1>

        <div class="productInfo__pricing">
            <span class="visually-hidden">{{ product.regular_price }}</span>
            <span id="ProductPrice" itemprop="price">
              {{ current_variant.price | money }}
            {% if product.compare_at_price_max > product.price %}
              <span class="visually-hidden">{{ product.sale_price }}</span>
             <p id="ComparePrice">
                 {{ product.compare_at }} {{ current_variant.compare_at_price | money }}
            {% endif %}

        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

        <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="productInfo__form">

            <div class="productSingle__select">
                <select name="id" id="productSelect" class="productSelect" class="product-single__variants">
                    {% for variant in product.variants %}
                        {% if variant.available %}
                                {% comment %}
                                    Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                                {% endcomment %}
                            <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                        {% else %}
                            <option disabled="disabled">
                                {{ variant.title }} - {{ product.sold_out }}
                        {% endif %}
                    {% endfor %}
            <div class="productInfo__quantity js-qty">
                <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="" data-qty="0">
                    <span class="icon icon-minus" aria-hidden="true"></span>
                    <span class="fallback-text">−</span>
                <input type="text" class="js-qty__num" value="1" min="1" data-id="" aria-label="quantity" pattern="[0-9]*" name="quantity" id="Quantity">
                <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="" data-qty="11">
                    <span class="icon icon-plus" aria-hidden="true"></span>
                    <span class="fallback-text">+</span>

            <div class="productInfo__addToCart">
                <button type="submit" name="add" class="productInfo__button" data-add-cart id="AddToCart" >Add To Cart</button>

<div class="productSingle__description rte" itemprop="description">
  {{ product.description }}


New Member
26 0 0

i know this post is old, but i need to have a variance has a breakdown of price on the dropdown menu fpr pricing that has the add to cart greyed out. is this possible?