How to hide quantity and buy buttons for sold-out products?

Shopify Discussion

Topic summary

Goal: hide the quantity and buy buttons on sold‑out products and raise the notify button.

  • Initial approach: add a CSS rule in base.css using the :has() selector to hide .product-form__buttons when .price–sold-out is present. The OP reported it “Not working,” and the helper asked where the code was added and if it was saved.

  • Diagnostics: another participant requested the store URL, and the OP provided a Shopify preview product link for testing.

  • Alternative solution proposed: edit base.css to create hidden classes (visibility: hidden; position: absolute) and modify theme.liquid to (1) include jQuery via CDN and (2) run a script on product pages that checks if the sold‑out badge is visible, then adds the hidden classes to .product-form__quantity and .shopify-payment-button. Instructions included saving changes and checking the storefront results.

  • Latest update: another helper asked to add additional code before in theme.liquid, but the snippet was not included.

  • Status: no confirmed fix yet; moving the notify button “up” wasn’t addressed directly. Code snippets are central to the discussion; resolution remains open.

Summarized with AI on January 14. AI used: gpt-5.
1

Hello There ,

Is there any way to remove or hide the quantity and buy buttons only in the sold-out products and bring the notify button a bit up.

Thank you!!

2

Hi @Anonymous

You can try to add this code at the bottom of your base.css file in Online store > Themes >Edit code to hide quantity and buy buttons

.product__info-container:has(.price--sold-out) .product-form__buttons { display: none !important; }
3

Not working

4

Hi @Anonymous

Where did you add the code? Did you save file after adding code?

5

@Anonymous Can you please send me your store URL?

6

https://qvau23msd549slug-71493648693.shopifypreview.com/products/bubaka-growing-chair-for-children-olive

7

Hi @DelightCart ,

You need to edit the code on the theme. You can follow the steps below:

  1. Go to Shopify admin → Online store → Edit code.

  2. Find the base.css file and add the following code at the end of the file, then save the file:

.hidden_quantiy_sold_out,
.hidden_btn_payment_sold_out {
visibility: hidden !important;
position: absolute !important;
}

  1. Find the theme.liquid file
    +) Add the following code before the tag: <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”>

+) Find the last tag in the file and add the following code before the tag

if(window.location.pathname.includes(‘/products’)) {
if( $(‘.price__badge-sold-out’).css(‘display’) !== ‘none’) {
$(‘.product-form__quantity’).addClass(‘hidden_quantiy_sold_out’);
$(‘.shopify-payment-button’).addClass(‘hidden_btn_payment_sold_out’);
}
}

+) Save the file

  1. Check the results outside the font store

Hope it helps @DelightCart !

8

Please try to add this code to your Online store > Themes > Edit code > open theme.liquid file, add code below before tag

1 Like