This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

📣 Try the fastest hosting platform with pay-as-you-go pricing & 24/7 expert support! MIGRATE NOW →

How To Add Custom Sold Out Badge in WooCommerce

Updated on August 24, 2021

2 Min Read
Add WooCommerce Sold Out Badge to the Store

WooCommerce Sold Out badge often presents a problem to the developers. The problem becomes a challenge when the store has several variations of a product.

In many cases, the variations are sold at different rates. Here is an image from a sample WooCommerce that demonstrate the problem of variation of products on sale:

Products on Sale

Add WooCommerce Sold Out Badge Storewide

The most common scenario is the placement of the WooCommerce Sold Out badge across the store for all the products that have been sold out. This can be accomplished by placing the following code snippet in the functions.php file of the theme.

add_action( 'woocommerce_before_shop_loop_item_title', function() {
   global $product;
   if ( !$product->is_in_stock() ) {
       echo '<span class="now_sold">Now Sold</span>';
   }
});

Here is how the code would look like in action:

Now Sold

Add WooCommerce Sold Out Badge for a Single Product

The next scenario is when you need to place the badge for a single product. For this, place the following code snippet in functions.php file of the theme. This will place the badge in front of the product summary:

add_action( 'woocommerce_before_single_product_summary', function() {
   global $product;
   if ( !$product->is_in_stock() ) {
       echo '<span class="now_sold">Now Sold</span>';
   }
});

This is how the code snippet will place the badge on the product summary page:

 product summary page

Place the following CSS code in the style.css file (located in the theme folder):

.now_sold {
    background: #000080;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 12px;
    position: absolute;
    right: 0;
    top: 0;
}

Want to Test Your Changes on Free Staging URLs?

Try Cloudways managed WooCommerce hosting for a hassle-free experience.

An Alternative Method

There is another method of adding the badge. Just add the following code to functions.php of the theme:

add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability( $availability, $_product ) {
   // Change In Stock Text
   if ( $_product->is_in_stock() ) {
       $availability['availability'] = __('Available!', 'woocommerce');
   }
   // Change Out of Stock Text
   if ( ! $_product->is_in_stock() ) {
       $availability['availability'] = __(' Now Sold ', 'woocommerce');
   }
  return $availability;
}

Conclusion

In this short tutorial, I demonstrated how you could easily add a WooCommerce store Sold Out badge to the products’ summary. If you need help, just ask the question in the comments below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now