snippet 1 min read PHP 7.4+ WP 5.0+ WC 3.0+

Display In Stock or Out of Stock Status on WooCommerce Product Pages

Show a tailored In Stock or Out of Stock message on WooCommerce product pages using the product's real stock status.

October 30, 2025 Updated Dec 1, 2025 #woocommerce #wordpress #php #snippet

WooCommerce already knows whether a product is in stock. This snippet exposes that state to the page so you can show separate .stockin and .stockout headings, or target the product with body classes in CSS.

Add it to a child theme’s functions.php file or use a code snippet plugin.

The complete snippet

// Add this to your theme's functions.php or use a code snippets plugin.

add_action( 'wp_head', 'stock_status_toggle_css' );
function stock_status_toggle_css() {
    // Only run on single product pages.
    if ( ! is_product() ) {
        return;
    }

    // Get the product object properly.
    $product = wc_get_product( get_the_ID() );

    if ( ! $product ) {
        return;
    }

    $is_in_stock = $product->is_in_stock();
    ?>
    <style>
        /* Hide both headings by default. */
        .stockin,
        .stockout {
            display: none !important;
        }

        <?php if ( $is_in_stock ): ?>
        .stockin {
            display: block !important;
        }
        <?php else: ?>
        .stockout {
            display: block !important;
        }
        <?php endif; ?>
    </style>
    <?php
}

// Alternative method using body classes for more flexible styling.
add_filter( 'body_class', 'add_stock_status_body_class' );
function add_stock_status_body_class( $classes ) {
    if ( is_product() ) {
        $product = wc_get_product( get_the_ID() );

        if ( $product && $product->is_in_stock() ) {
            $classes[] = 'product-in-stock';
        } else {
            $classes[] = 'product-out-of-stock';
        }
    }

    return $classes;
}

Add the matching headings

Place these elements in your product template, Elementor HTML widget, or another product-page content area:

<p class="stockin" role="status">In stock</p>
<p class="stockout" role="status">Out of stock</p>

Both messages start hidden. The PHP-generated CSS reveals only the message that matches the current product status.

Use body classes for custom layouts

If the status needs to affect more than a single message, use the body classes added by the second filter:

.product-in-stock .buy-now-note {
    color: #16803c;
}

.product-out-of-stock .buy-now-note {
    color: #b42318;
}

The product object is checked before calling is_in_stock(), and both hooks are limited to single product pages so unrelated pages do not receive the extra markup or classes.