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%']