How To Hide ATC and Payment on Out Of Stock Items on Trade Theme

Store Design
,

Topic summary

A user wants to hide the grayed-out “Add to Cart” (ATC) button and payment options on out-of-stock product pages, showing only a “Notify Me” button for restock alerts. They want to avoid code that briefly displays these elements before hiding them.

Three solutions were provided:

  1. Liquid conditional wrapper: Wrap payment option code with {% if product.available %} to prevent rendering when unavailable

  2. CSS targeting disabled elements: Add CSS to base.css that hides disabled buttons:

    • .product-form__buttons .button:disabled { display: none; }
    • Similar rules for Shopify payment buttons

  3. Theme.liquid modification: Insert conditional code above the </body> tag to control visibility based on product availability

All solutions target the same outcome through different approaches—either preventing elements from rendering (Liquid conditionals) or hiding them via CSS (styling disabled states). The CSS approach is simpler to implement but may still briefly load elements before hiding them, which the user wanted to avoid.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi! I am wanting to hide the ATC button and the payment options that show grayed out on the product page when the items are out of stock. I would like for it just to show my Notify Me button for instock alerts. Can anyone tell me how I can do this officially? I have tried code before that still loads the ATC and payment options and then quickly hides them. Trying to avoid that.

Screenshot 2025-06-30 at 22.46.16.png
Screenshot 2025-06-30 at 22.46.16.png2912Ă—1640 639 KB

Thank you!

1 Like
2

Hello @jordanbford1 ,

Try to wrap the payment options with a condition.

{% if product.available %}

// Your payment icons existing code

{% endif %}

or use this css in base.css

.product-form__buttons .button:disabled {
    display: none;
}
.shopify-payment-button shopify-accelerated-checkout[disabled] {
    display: none;
}

Regards
guleria

Regards
Guleria

3

Hey @jordanbford1

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

{% if product.available %}

{% endif %}

RESULT:

Moeed_0-1751346950992.png
Moeed_0-1751346950992.png1899Ă—754 313 KB

If I managed to help then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hello @jordanbford1

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

.product .product-form .shopify-payment-button__button[aria-disabled="true"],
.product .product-form .product-form__submit.button[disabled],
.shopify-payment-button shopify-accelerated-checkout[disabled]
{
    display: none !important;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.