If you are looking for a sold out badge for WooCommerce store out of stock products without a plugin, you are at the right place. Keep going through the article to easily accomplish your goal.
A nice ‘sold out’ badge on products image, on the shop page or product category archives will look great. We can achieve that using woocommerce_before_shop_loop_item_title
hook and some css.
function careless_display_woocommerce_sold_out_badge() {
global $product;
if ( ! $product->is_in_stock() ) {
echo '<span class="soldout">Sold Out</span>';
}
}
add_action( 'woocommerce_before_shop_loop_item_title', 'careless_display_woocommerce_sold_out_badge' );
This will show the “Sold Out” text right above the product title. We will place it on top of the product image with the help of some css.
.soldout {
padding: 10px 20px 10px 20px!important;
text-align: center;
background: #000000;
color: white;
position: absolute;
top: 10px;
font-size: 20px;
font-weight: 500;
}
This is how it looks on strofront theme:
Code goes in the functions.php
file of your active theme. And css goes in your style.css
file or in your theme options (if it has an option add css).
Note: Above method does not work on search results. Follow this article to show sold out badge on WooCommerce search result.