Display " Out of Stock " on catalog view Woocommerce

Question

I can't get this to work after hours and hours of research. I hope someone can help me.

In woocommerce, the out of stock message is only displayed on the single product page and NOT on the catalog page. This means someone first has to click on the product to find out it's sold out. Bummer. It's important for us to show the out of stock product, since we're selling unique products. The "Out of stock" notice has to be visible directly under the product image.

W're dying for a solution :)

Kind regards,

Roos

Answer 1

In 2017, this snippet will work:

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

Answer 2

The easiest way will be with css:

Each product on the catalog will have a < li > tag. If the product has stock it will have this class "instock" if it does not have stock it will have this class "outofstock"

So you can create this css:

.outofstock:before{
    content: url(http://image.png);
    position: absolute !important;
    top: 9px;
    left: 7px !important;
    text-align: center;
    z-index: 9999999;
}

remember to replace the image.png url with yours.