Display ” Out of Stock ” on catalog view Woocommerce

1 Views

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.

Read More

W’re dying for a solution 🙂

Kind regards,

Roos

Post Views: 1

Related posts

Leave a Reply

6 comments

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

  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.

  3. Found this snippet here. Worked perfectly on my site.

    //add action give it the name of our function to run
add_action( 'woocommerce_after_shop_loop_item_title', 'wcs_stock_text_shop_page', 25 );

//create our function
function wcs_stock_text_shop_page() {

    //returns an array with 2 items availability and class for CSS
    global $product;
    $availability = $product->get_availability();

    //check if availability in the array = string 'Out of Stock'
    //if so display on page.//if you want to display the 'in stock' messages as well just leave out this, == 'Out of stock'
    if ( $availability['availability'] == 'Out of stock') {
        echo apply_filters( 'woocommerce_stock_html', '<p class="stock ' . esc_attr( $availability['class'] ) . '">' . esc_html( $availability['availability'] ) . '</p>', $availability['availability'] );
    }

}

  4. I know it’s been quite a while but I just want to do the same and noticed that there are two classes, on the li-element in the loop. 

    <li class="first ... outofstock">

    vs

    <li class="first ... instock">

    If it’s just the markup you want to change, maybe just do the CSS and don’t hook into woocommerce just for the message.

  5. @yuvalsab, nice one 😉
    This is working on 2020

    =======================

    add_action( 'woocommerce_after_shop_loop_item_title', 'talbiconsept_wc_template_loop_stock', 10 );

function talbiconsept_wc_template_loop_stock() {
    global $product;
    if($product->managing_stock() && (int)$product->get_stock_quantity() < 1)
    echo '<p class="stock out-of-stock">'.__('Out of Stock').'</p>';
}

  6. This works for me, added in theme functions.php file:

    add_filter('woocommerce_get_availability_text', 'themeprefix_change_soldout', 10, 2 );

/**
* Change Sold Out Text to Something Else
*/
function themeprefix_change_soldout ( $text, $product) {
if ( !$product->is_in_stock() ) {
$text = 'SOLD OUT';
}
return $text;
}