Adding Metafields to Disable Add to Cart for OOS Products

Objective

This guide outlines how to replicate "Out of Stock" behavior on product display pages (PDPs) while still allowing subscription orders to be processed.

Background

Currently, for subscriptions to process orders that include products with negative inventory, the "Continue selling when out of stock" option must be enabled. However, enabling this setting also allows new, one-time purchases of these out-of-stock items, which may result in overselling.

Purpose

To address this, the following guide provides a method to simulate an "Out of Stock" state for one-time purchases—restricting new customers from buying unavailable items—while still permitting existing, recurring subscription orders to process as usual.

How To Implement

  1. Create the Metafield

  2. Go to Settings > Custom data > Products in Shopify admin.

  1. Add a new definition

    • Name: Force Out of Stock (feel free to adjust as needed)

    • Key: force_out_of_stock (this will autopopulate from the name)

    • Type: Boolean (True/False)

  1. Set the Metafield for Specific Products

    • Navigate to a product that you want to “set out of stock” visually on the frontend.

    • Scroll to the metafields section at the bottom.

    • Set Force Out of Stock to true.

  1. Modify Your Theme Code

    • Go to Online Store > Themes > Edit Code

    • Find your product.liquid, main-product.liquid, or product.json template, depending on your theme.

    • Locate your purchase button (i.e. add to cart button or buy button).

    • Modify the display of the purchase button based on the Force Out of Stock metafield.

      • When this metafield is enabled, a disabled version of the "Buy" button should be shown to simulate an out-of-stock state.

      • If the metafield is not enabled, the standard "Buy" button should be displayed as usual.

Example Templates

Example 1

{% if product.metafields.custom.force_out_of_stock == true %}
  <p class="product__inventory">Out of stock</p>
  <button class="btn btn--disabled" disabled>Sold Out</button>
{% else %}
  <!-- Normal inventory logic -->
  {% if product.available %}
    <button class="btn">Add to cart</button>
  {% else %}
    <button class="btn btn--disabled" disabled>Sold Out</button>
  {% endif %}
{% endif %}

Example 2 (in product-form.liquid)

// some styling to disable the button 
<style>
  .out-of-stock-btn {
  pointer-events: none;
  opacity: 0.8; 
  cursor: not-allowed;
}
</style>
      
[... rest of code here]     
{% if product.metafields.custom.force_out_of_stock == true %}
// displaying an out of stock button with disabled styling
     <div class="product-form__submit-wrapper">
         <button class="no-style btn btn--action btn--full out-of-stock-btn" disabled>
          Out of Stock
        </button>
     </div>
  {% else %}
// displaying their default add to cart button
      <div class="product-form__submit-wrapper">
        <button type="submit" class="product__submit no-style btn btn--action btn--full"
          {% if settings.cartType == 'drawer' %}onclick="ajaxCart(this)"{% endif %}
          name="add"
          data-product-submit
        >
          <span class="visually-hidden">{{ product.title }} &mdash; <span data-product-price-cta></span></span>
          {% if product.type == 'Custom Bundle' %}
            <span data-product-submit-text>
              <span class="product-form__bundle-atc-price">
                <span data-product-price-cta>
                {%- liquid
                  if display_subscription_options and product.selling_plan_groups.size > 0 
                    echo product.selected_or_first_available_variant.selling_plan_allocations[0].price | money_without_trailing_zeros 
                  else 
                    echo product.selected_or_first_available_variant.price | money_without_trailing_zeros 
                  endif 
                -%}
                </span>
                {% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}
                  <s data-product-compare-price-cta>{{ product.selected_or_first_available_variant.compare_at_price | money_without_trailing_zeros }}</s>
                {% endif %} -
              </span>
              {{ 'product.add_to_cart' | t }}
            </span>
          {% else %}
            <span data-product-submit-text><span data-product-price-cta>{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}</span> – {{ 'product.add_to_cart' | t }}</span>
          {% endif %}

          <span x-grid columns="1" pi="center" class="loading-overlay__spinner hidden">{{ 'product.addingToCart' | t }}</span>
        </button>
      </div>
    {% endif %}
PreviousBundles: Developer DocumentationNextTroubleshooting

Last updated

Was this helpful?