If Inventory is 0 Remove Add to Cart Button Change Text to Coming Soon and Add Coming Soon Overlay - Product List

CREATE SNIPPET

inventory-checker.liquid

Create a snippet named inventory-checker.liquid and add the following code:

{% assign available_inventory = p.variants.first.inventory_quantity %}
{% if available_inventory == 0 %}no_inventory{% else %}have_inventory{% endif %}

custom.scss

Open custom.scss and add the following code.

This will hide the add-to-cart button.

#product-list {
    .no_inventory .add-to-cart {
        visibility: hidden;
    }
    h4.coming-soon-overlay {
        position: absolute;
        background: #000;
        text-align: left;
        margin-top: 35%;
        padding: 8px;
        font-weight: bold;
        font-size: 17px;
        color: #fff;
        letter-spacing: 1px;
    }    
}

theme.liquid

Open theme.liquid and add the following code at the bottom of the page.

This changes any quick-cart button text on products without inventory to "coming soon".

    // Change quick cart button text to coming soon if inventory is 0
    $( document ).ready(function() {
      $( ".no_inventory .quick-cart-btn" ).text( "COMING SOON" );
    });

product-loop.liquid

Open product-loop.liquid and find the div that includes the __thumbnail-span and add the following code inside the CSS.

{% include 'inventory-checker' %}

HERE IS AN EXAMPLE

<div class="{% include '__thumbnail-span' %} {% include 'inventory-checker' %}">

product-loop.liquid continue

After the closing div from the previous step add the following code.

This will add an overlay above the product image within the product-list.

  {% if available_inventory == 0 %}
  <h4 class="coming-soon-overlay">coming soon..</h4>
  {% endif %}