Hide Add to cart button when a variable product is out of stock

Hello @cjbreither

Why don’t you simply disable to the out of stock variation in the first place?
https://prnt.sc/u0t06h

Cheers??

Hi there,

I have tried to hide the “Add to cart” button when the product is out of stock without success

Just to be sure: Customers should not be able to add a product (variable or otherwise) to the cart when the product is out of stock UNLESS backordering is enabled.

Practically speaking, please ensure that backordering is disabled for that variation and that “Out of stock visibility” is selected in your settings under **WooCommerce > Settings > Products > Inventory**.

Hi @nazreenexe,

I don’t want to disable the out of stock variation because I’m using a waitlist and having my customers see what’s out of stock is necessary for that.

@riaanknoetze,

Currently, the Add to Cart button is greyed out. I’d like to hide it since the Waitlist plugin I’m using is overlapping with the button and is rendering the waitlist unuseable. I’m hoping to just hide the button rather than adding code to adjust the padding on the waitlist box – since that would then make the waitlist look weird on non-variable items where the add to cart button is already not shown.

Hi @cjbreither,

You could hide the disabled button with some CSS. This works on my test site with the Storefront theme. If the theme you’re using has changed the classes on the buttons this may not work, but hopefully will give you an idea of how to approach it.

• In your WordPress dashboard, go to Appearance and click on Customize.
• Look down for the Additional CSS section and click on it.?
• In the box there, paste this:

  
  .single_add_to_cart_button.disabled.wc-variation-is-unavailable {
      display: none;
  }
  

• Publish your changes.

Cheers!

Hi @3sonsdevelopment, that code sadly didn’t work for me – I’m guessing my theme (Divi) must have the classes named something else, but it definitely does give me a good place to work from! I appreciate it!

Hello the code string works “partially”, in the sense that when the product is out of stock the word ADD TO CART disappears correctly but (unfortunately) the button (plus and minus) remains to select the quantities [.product-image-summary div.quantity].

.single_add_to_cart_button.disabled.wc-variation-is-unavailable {
    display: none;
}