Out Of Stock Badge

Are you looking for a way to add a badge to show that a product is Out Of Stock in WooCommerce? This code snippet will allow you to add the functionality to allow your customers to easily see that a product is currently out of stock. You can completely tailor the wording of the button and the descriptive text to or colour schemes to show the users that the product is out of stock, on the shop page.

To do this you need to:

Open WordPress admin panel, go to Appearance > Theme Editor.
Open functions.php theme file.
Add the following code at the bottom of function.php file of your child theme.
Save the changes and check your website. Note that you can change the text included from ‘Proceed Now’ to whatever you wish. The custom text in proceed to checkout text will now be displayed.

Note:

To change the proceed to checkout button, ensure that you take a backup and only do this through your child theme so that future updates to your theme will not overwrite the code.

//START OF CODE

/**
*Out Of Stock Badge in WooCommerce
* Add this code in your active theme functions.php file
**/

function arrowdesign_ie__function_to_change_out_of_stock_badge(){//start function
//echo'hello';
////declarations
global $product;

//you can change the colours here (or anything else of the css) - enjoy :)
$style = "background:blue; color:white; font-size:14px;font-weight:600;padding:5px;position:absolute;right:10px;left:10px;top:10px;z-index:100;";
if (!$product->managing_stock() && !$product->is_in_stock()) {

//change Unavailable to what ever you wish - enjoy
echo '<span style="'.$style.'">Unavailable</span>';
}
}//end function
add_action( 'woocommerce_before_shop_loop_item_title', 'arrowdesign_ie__function_to_change_out_of_stock_badge' );

//END OF CODE