Sold out on product page?

Hello @b1026q9

By default, the Add to cart button will be replaced with the Out of stock message unless you allow backorders for that particular product.

If you see the Add to cart button for a product that is out of stock, go to Product Edit Page > Product data > Inventory > Manage stock and make sure the Allow backorders? option is set to do not allow.

Please check this screenshot: https://screencast-o-matic.com/i/c36FY4VtPsK

If it doesn’t work please share the product URL so I can take a look?

Let me know how that goes!

I have them as do not allow, but still Add to Bag button is showing.
Should I send the URL from here?

Hi @b1026q9

Please share the product URL and send the screenshot of your product inventory tab setting so I can take a look.

I recommend https://snipboard.io for sharing screenshots – please follow the instructions on the page, then paste the URL in this chat. It works with Chrome, Firefox, Safari, and Edge.

I’d like to understand more about your setup.

Could you please send me a copy of your site’s System Status? You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”.

Once you’ve done that, you can paste the text in https://gist.github.com/ and feel free to change/remove your site URL in the report for privacy reasons.

Once you do that, you can paste the Gist link here in your reply.

Hi,
I took the screenshot of the setting.
https://snipboard.io/iF0Odf.jpg

and here is the system report.
https://gist.github.com/rtk0407/f5075d5b4d972f57d97c4f6f50e72eab

Hi @b1026q9

Thank you for providing the screenshot, this is really helpful! ??

I replicated the scenario on my test site using one of the variable product, however, I was not able to reproduce the issue. The Out of Stock notification is displayed on my end and the Add to Cart button is disabled as well.

Image Link: https://snipboard.io/hMzHUs.jpg

Meanwhile, I was not able to test this on your site since the site URL was not the actual URL of your site.

Can you please try to switch to the default Storefront theme and only WooCommerce plugin is enabled and see if this works?

If so, then, please try to perform a full conflict test to check what causes the conflict on your site, either a third-party plugin, your theme, or any custom code present on your site.

https://woocommerce.com/document/how-to-test-for-conflicts/

If this was caused by a third-party plugin present on your site, it would be best to reach out to the developers for further assistance here.

Let us know how it goes!

• This reply was modified 2 years, 5 months ago by xue28 (woo-hc).

Is there a way to change the Add to cart button to become Out of Stock button when all variation is sold?

Hi @b1026q9

This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

Alternate, 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.

Under Customize > Additional CSS, you can add the following code:
?

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

?
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).