WooCommerce – Display “Out of Stock” on Loop Pages

This fixes a problem for those who want to display a label when an item is out of stock. You can save this in your functions.php to make it work.

/**
 * @snippet       Display "Sold Out" on Loop Pages - WooCommerce
 * @author        Primal Media
 * @testedwith    WooCommerce 4.6
 */
 
add_action( 'woocommerce_before_shop_loop_item_title', 'primal_display_sold_out_loop_woocommerce' );
 
function primal_display_sold_out_loop_woocommerce() {
    global $product;
    if ( ! $product->is_in_stock() ) {
        echo '<span class="soldout">Out of Stock</span>';
    }
} 

You will also need to add this to your style sheet.

.soldout {
  padding: 3px 8px;
  text-align: center;
  background: #ff0000;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  border-radius: 5px;
}