Display Woocommerce Product Stock Status on Essential Grid

This article will show you a method to display the stock status on a WooCommerce Product Grid Item.

Quick Note:

Refer to this article that explains how to create a WooCommerce Product Grid

Step 1: Insert the custom PHP code below into your theme functions.php file or with the Code Snippets Plugin

add_shortcode( ‘stock_status’, ‘display_product_stock_status’ );

function display_product_stock_status( $atts) {
    $atts = shortcode_atts(
        array(‘id’  => get_the_ID() ),
        $atts, ‘stock_status’
if( intval( $atts[‘id’] ) > 0 && function_exists( ‘wc_get_product’ ) ){
    $product = wc_get_product( $atts[‘id’] );
    $stock_status = $product->get_stock_status();
    if ( ‘instock’ == $stock_status) {        
$html = ‘<p class=”stock in-stock”>In stock</p>’;  
    } else {
$html = ‘<p class=”stock out-of-stock”>Out of stock</p>’;      
return $html;

Step 2: Edit the WooCommerce Product Grid Skin.

Step 3: Create a new Layer and select Text/HTML as Layer Source.

Step 4: Replace the Layer Texts with the shortcode below in the “Text/HTML” source

[stock_status id='%post_id%']


Display Woocommerce Product Stock Status on Essential Grid

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author


Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!