Sold Out badge/label/ribbon/tag

Hi Nicola!

I know this isn’t exactly what you asked, but I just wanted to note you can use Inventory Options to conceal out-of-stock items from the catalog.

As it currently stands, to change how out-of-stock items are displayed in the catalog you’d need either a theme that has that option built-in, or you’ll need to wrangle a little code– this gentleman here offers a working example of what you’re looking for. Please bear in mind that WooCommerce support can’t help you troubleshoot or address issues with customizations.

All Best,
Damien

Hello,

Thank you for your reply!

So woocommerce does not show a sold out badge for anyone then?

I know about that option in the inventory thank you, i have it set to show sold out items already. My issue is just that I want to show all my sold out items on my catalogue pages but I want them to have a badge saying sold out on the catalogue page with the badge/label across the image.

Thank you for linking to that page with the code, I tried it out but it now just says sold out under the product photo thumbnail, not in a label/badge across the image.

I am using the popular Customizer theme so I can’t see that they wouldn’t include functionality for sold out badges ??

I have now been at this literally all day amd pulling my hair out.

Thank you again

Nicola

Products that are out of stock do have their buttons change to “read more”, and a html class is added: https://cld.wthms.co/6EYL/ztiXl07e

So with css you could add in a label, or you can do so with a PHP snippet like:

add_action( 'woocommerce_after_shop_loop_item_title', 'wc_ninja_outofstock_notify_on_archives', 10 );
function wc_ninja_outofstock_notify_on_archives() {
	global $product;
	if ( ! $product->managing_stock() && ! $product->is_in_stock() ) {
		 echo '<p class="stock out-of-stock">Out of Stock</p>';
	}
}

Wow thank you ??

I managed to find a plugin thay does the job although it gives a sticker that doesn’t match the woocommerce sale ones and it’s not at the same position either, it doesn’t look the best so I will give this code a go when I get home, thank you ??????

Nicola

Which plugin are you using?

If it’s just a cosmetic thing you want and you’re comfortable with using CSS you can do something like this:

li.outofstock .price:after {
    content: "Sold out";
    font-size: 2em;
    background: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    text-shadow: 0px -1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px 1px 0 #000;
    position: absolute;
    width: 100%;
    text-align: center;
    display: block;
    color: #fff;
    opacity: 0.7;
    line-height: normal;
    top: 30%;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
}

It’ll probably need a bit of tweaking to make it work nicely in responsive themes.

Thanks Emily @empom, it worked!

• This reply was modified 7 years, 10 months ago by S1awek.

Thank you, Emily @empom. Tried it and it works!