Website Building » WooCommerce » How Do I Change the Out of Stock Badge in WooCommerce?

How Do I Change the Out of Stock Badge in WooCommerce?

Last updated on January 23, 2023 @ 12:23 pm

If you’ve ever wanted to change the “Out of Stock” badge in WooCommerce, you’re in luck! There are a few different ways that you can go about doing this, and we’ll outline all of them for you here.

The first and easiest way to change the “Out of Stock” badge is to simply add some CSS to your theme. You can do this by going to Appearance > Customize > Additional CSS in your WordPress dashboard. Then, just add the following code:

woocommerce-page span.onsale {
  background-color: #000000;
  border-color: #000000;
}

This will change the background color and border color of the “Out of Stock” badge to black. If you want to change it to another color, simply replace the hex code in the code above with the hex code of the color that you want.

Another way that you can change the “Out of Stock” badge is by using a plugin. One plugin that we recommend is WooCommerce Custom Stock Status. This plugin allows you to customize the text and colors of the “Out of Stock” badge, as well as a number of other stock statuses.

Once you’ve installed and activated the plugin, go to WooCommerce > Settings > Products > Custom Stock Statuses to configure it.

PRO TIP: If you are not a developer or are not comfortable with code, do not attempt to change the out of stock badge in WooCommerce. This warning note is for anyone who is considering changing the out of stock badge in WooCommerce. If you are not comfortable with code or are not a developer, do not attempt to change the out of stock badge in WooCommerce.

That’s all there is to changing the “Out of Stock” badge in WooCommerce! As you can see, it’s a pretty simple process, no matter which method you choose. We hope this article has helped you out.

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.