Weird blank button on product page

Store Design
, ,

Topic summary

Issue: On a Woodstock theme product page, when an item is out of stock, a blank, unclickable button appears beneath the “Notify Me” button (site: leadingsolutions.net.au). A screenshot was provided.

Diagnosis: The blank element is the disabled Add to Cart button that renders when inventory is unavailable.

Fix (CSS): Hide only the disabled state so the Add to Cart button still shows when in stock.

  • Shopify admin: Online Store → Themes
  • For the active theme: … → Edit code
  • Open Assets → theme.css (or base.css or styles.css)
  • Add at the bottom: .product-form__buttons .button:disabled { display: none; }

Outcome: This removes the blank disabled button for out-of-stock products while preserving the Add to Cart button when items are available.

Status: Actionable steps provided; no further issues reported or confirmed resolution.

Summarized with AI on December 25. AI used: gpt-5.
1

Hi, I’m using the Woodstock theme and my site URL is: https://leadingsolutions.net.au/.

I’m having issues on the product page when something isn’t in stock. The Notify Me app button appears but under it is this weird blank button that can’t be clicked on. Anyone know how to get rid of it?

Thanks!

Screenshot 2024-07-01 095901.png
Screenshot 2024-07-01 095901.png1139×862 91 KB

2

By looking at your website that button is most likely an ‘Add to Cart Button’, but because the product is not in stock it’s blocked. In order to remove it you would have to edit the main product liquid code.

Instructions

  1. Go to ‘Online Store’ → Themes

  2. At your Active Theme click the (…) dots → Edit Code

  3. Locate the Assets Folder and find the file ‘theme.css’ or ‘base.css’ or ‘styles.css’

  4. At the bottom of the file add this code

.product-form__buttons .button:disabled{
  display: none;
}

Hope this helps.

3

Ok, how do I do that? I still want the add to cart button to show when the product is in stock though.

4

Instructions

  1. Go to ‘Online Store’ → Themes

  2. At your Active Theme click the (…) dots → Edit Code

  3. Locate the Assets Folder and find the file ‘theme.css’ or ‘base.css’ or ‘styles.css’

  4. At the bottom of the file add this code

.product-form__buttons .button:disabled{
  display: none;
}