# 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.

<figure><img src="/files/2swIPKDH2y7E19yqW5vc" alt=""><figcaption></figcaption></figure>

3. 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)

<figure><img src="/files/h5m59WYlwSSipAktu64D" alt=""><figcaption></figcaption></figure>

4. **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**.

<figure><img src="/files/K6dDEu1IsGbywhgOEiVU" alt=""><figcaption></figcaption></figure>

5. **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`)

```javascript
// 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 %}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.smartrr.com/docs/support/developer-documentation/adding-metafields-to-disable-add-to-cart-for-oos-products.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.