"Out of Stock" label on product images

[NadiaCrisisEquipped]

Hello!

I was wondering if there was a way to add an “out of stock” stamp or indicator over an image/ price of an item that I mark as “out of stock” in my WooCommerce store.

Here’s an example of what I mean. The items you see highlighted in red are all marked “out of stock” in my store. I want the customer to see that they’re out of stock way before they click on the product itself (to save them time). At the moment they appear as normal.

You can see the link to the screenshot above here:
https://crisisequipped.com/product-category/stoves-fuel/

Thanks for your help!

[thai]

Hi Nadia,

It could be done with the custom CSS. Please try adding this custom CSS under Theme Options > CSS:

.woocommerce li.product.outofstock {
    position: relative;   
}

.woocommerce li.product.outofstock .entry-featured::before {
    position: absolute;
    content: 'OUT OF STOCK';
    right: -10px;
    color: red;
    transform: rotate(45deg);
    top: 30px;


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
    -webkit-transform: rotate(45deg);

  /* Firefox */
    -moz-transform: rotate(45deg);

  /* IE */
    -ms-transform: rotate(45deg);

  /* Opera */
    -o-transform: rotate(45deg);
    font-size: 14px;
    font-weight: bold;
}

Hope it helps

[NadiaCrisisEquipped]

Yes that’s perfect! Is it possible to make the text a little bigger? And bold perhaps?

Thanks so much

[friech]

Yes, in the CSS code provided you can adjust the 14px value of font-size but not too much because the text can get overflow from the product container. The font is already bold, you need to change the font-family if you need a much bolder font.

Thanks,

[NadiaCrisisEquipped]

I tried to change the font family and it wasn’t working… I’m not sure if there’s a specific font family selection I have to choose from or I’m putting the code in the wrong place?

The label still gets easily lost even though I increased the size a little bit. Is it possible to move it down below where the price is shown?
Thank you!

[Prasant]

Hello Nadia,

Thanks for updating the thread.

To change the position, please replace previous code with following:

.woocommerce li.product .entry-wrap::before {position: absolute;
    content: 'OUT OF STOCK';
    right: 10px;
    color: red;
    font-size: 16px;
    font-weight: bold;
    bottom: 10px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[NadiaCrisisEquipped]

That almost worked, except it marks ALL the products out of stock
It looks like this:

[friech]

Hi Nadia,

Sorry, but we are getting too far. CSS is not for that type of customization. If you want the “Out of stock” text next to the price or underneath. Please remove all custom CSS provided and use the code given here instead, (the very first code given) add that to your child theme’s functions.php file.

Then use this custom CSS to style that “Out of stock” text.

p.stock.out-of-stock {
	font-family: comic-sans;
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
}

Please keep in mind that we can only provide custom CSS for styling the text, further customization from here would be outside of the scope of support that we can offer.

Thank you for understanding,

[NadiaCrisisEquipped]

That worked! Thank you so much

[Prasant]

You are most welcome.