September 19, 2020

How To Show Out Of Stock Products In WooCommerce

What To Expect From This post:

1) The benefits of showing out of stock products in WooCommerce.

2) Where to add your code.

3) The code snippet that will add an out of stock badge on all of your products that are out of stock on your WooCommerce shop page.

 

Please note:

The code that we are going to add to our functions.php file will get removed when you update your theme.

So you have 2 options to avoid losing your code:

1) Use a child theme and save the code there. For more info on child themes please check this website to get a free child theme and to see what a child theme is.

2) Every time you update your theme, you can just paste the code in your functions.php file by following the instructions in this post.

Why Show Out Of Stock Products In WooCommerce?

The default setting in WooCommerce for items that are out of stock, on the shop page, is to simply put a read more button under each product.

There is no indication that the product is out of stock when you are on the Shop Page.

Please refer to the image below to see what I mean.

If you want to learn how to insert “add to cart” buttons under all your products on your shop page, please check out this post.

1) Navigate To “Theme Editor”

In the sidebar menu on your WordPress dashboard, navigate to the theme editor.

Appearance > Theme Editor (check image below).

2) Click on the “Functions.php” file

On the right-hand sidebar area, click on the file that’s called functions.php (look at the image below).

Once the functions.php file has loaded, scroll right down the bottom of the file. 

Add another line by pushing “ENTER” on your keyboard. This is where we’ll add our code.

3) Paste the following code

 

add_action( ‘woocommerce_before_shop_loop_item_title’, ‘bbloomer_display_sold_out_loop_woocommerce’ );

function bbloomer_display_sold_out_loop_woocommerce() {
global $product;

if ( !$product->is_in_stock() ) {
echo ‘<span class=”soldout”>’ . __( ‘SOLD OUT’, ‘woocommerce’ ) . ‘</span>’;
}
}

 

Then click the UPDATE FILE button.

After the function.php file has been updated successfully, you can navigate to the CUSTOM CSS section in your Divi Theme Settings (see image below).

If you are using a different theme (not Divi), then you can navigate to:

Appearance > Customize > Look for the section called “Additional CSS”

Add the following code there (if you are not using Divi).

4) Add The CSS Code Snippet

Add the following code to the Custom CSS section, after any other CSS codes that you have.

.soldout {
padding: 3px 8px;
text-align: center;
background: #f32626;
color: #fff;
font-weight: bold;
position: absolute;
top: 6px;
right: 6px;
font-size: 12px;
}

5) Style It To Fit Your Website

You can go ahead and edit the code to better suit your own website.

Here are the lines of code that you can edit:

background: #f32626;

(change the background colour of the out of stock badge)

 

color: #fff;

(change the colour of the text)

 

font-weight: bold;

(change the weight of the font- light, regular, heavy, etc)

 

font-size: 12px;

(change the size of the text)

6) Style It To Fit Your Website

You can go ahead and edit the code to better suit your own website.

Here are the lines of code that you can edit:

background: #f32626;

(change the background colour of the out of stock badge)

 

color: #fff;

(change the colour of the text)

 

font-weight: bold;

(change the weight of the font- light, regular, heavy, etc)

 

font-size: 12px;

(change the size of the text)

7) Save

Don’t forget to save!

And that’s it!

Now you know how to show out of stock products in WooCommerce.

 

Need A Website?

We specialize in designing highly professional websites for small to medium-sized businesses at an affordable cost.

Only pay us for the job once you are 100% satisfied with your new website.

We offer a lifetime after-sale support service for all of our customers.

Free Tutorials

For more useful Divi tutorials just like this one, go check out our Blog page where you’ll find a whole bunch of awesome goodies, to help make your website friggen AWESOME!

Newsletter

Subscribe to our newsletter if you would like to join our mailing list where you will receive things like specials, giveaways, and news. Don’t worry, we will NEVER send you any spam.

4 Comments

  1. Steven Mylie

    This is SOOO helpful thank you

    Reply
    • ryan

      Hi Steven. Thanks for the feed back. Im glad you found it useful

      Reply
  2. Jason

    Great post! Thanks very much

    Reply
    • ryan

      Hi Jason, pleasure!

      Reply

Submit a Comment

Your email address will not be published.