Another simple snippet that can easily help user experience and make sure the sold out badge shows on every product in the category & shop page. Not all themes allow this so you can use the snippet below to make it happen!

Example: display “Sold Out” on archive pages – WooCommerce

Show WooCommerce Sold Out Badge
Show WooCommerce Sold Out Badge Show WooCommerce Sold Out Badge

Snippet: Show “Sold Out” on Shop and Archive pages – WooCommerce


/**
 * @snippet       Display "Sold Out" on Loop Pages - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=17420
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.4.3
 */

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>';
    }
} 

And a bit of CSS:


/* CSS */

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

“I don’t code – is there a reliable plugin for that?”

As many readers would love to code but don’t feel 100% confident with it, I decided to look for a reliable plugin that achieves the same (or even better) result.

In this case, I recommend the YITH WooCommerce Badge Management plugin. On top of displaying custom text badges (free version), you can also create CSS, image and advanced badges, assign product badges to specific products and/or categories, pick the badge position and much more.

But in case you wish to code, keep reading 🙂

Share:

Leave a Reply