How to Show a Live Stock Countdown Message in WooCommerce (without plugin)

Creating urgency is one of the most effective ways to drive conversions on an eCommerce website. One way to do this in WooCommerce is by showing a live stock countdown message like:

“Hurry! Only 3 left in stock.”

This simple feature lets customers know that a product is running low and encourages them to buy before it’s too late.

In this guide, you’ll learn how to add this functionality using a custom code snippet that works for both simple and variable products.


The Full Code Snippet

Add the following code to your theme’s functions.php file or in a custom plugin:

// Show live stock countdown message
function rh_live_stock_countdown_message() {
    global $product;

    // Set the threshold for low stock
    $stock_threshold = 5;

    // For variable products
    if ( $product->is_type( 'variable' ) ) {
        echo '<div id="rh-stock-count-message"></div>';
        ?>
        <script>
        jQuery(document).ready(function($){
            function updateStockMessage() {
                var selected = $('.variations_form').data('product_variations');
                var variation_id = $('input.variation_id').val();

                if (!variation_id) {
                    $('#rh-stock-count-message').html('');
                    return;
                }

                var variation = selected.find(function(v){
                    return v.variation_id == variation_id;
                });

                if (variation && variation.max_qty > 0 && variation.max_qty <= <?php echo $stock_threshold; ?>) {
                    $('#rh-stock-count-message').html('<p style="color:red;">Hurry! Only ' + variation.max_qty + ' left in stock.</p>');
                } else {
                    $('#rh-stock-count-message').html('');
                }
            }

            $('form.variations_form').on('change', 'select', function() {
                setTimeout(updateStockMessage, 200);
            });
        });
        </script>
        <?php
    }

    // For simple products
    if ( $product->is_type( 'simple' ) && $product->managing_stock() && $product->is_in_stock() ) {
        $stock_quantity = $product->get_stock_quantity();
        if ( $stock_quantity > 0 && $stock_quantity <= $stock_threshold ) {
            echo '<p style="color:red;">Hurry! Only ' . esc_html($stock_quantity) . ' left in stock.</p>';
        }
    }
}
add_action( 'woocommerce_single_product_summary', 'rh_live_stock_countdown_message', 20 );

How the Code Works

Let’s break this down in simple terms:

Step 1: Set the Stock Limit

$stock_threshold = 5;

This sets the maximum quantity that will trigger the message. If a product (or variation) has 5 or fewer items, the message appears.


Step 2: Show Stock Message for Variable Products

  • The message is placed inside a <div>: echo '<div id="rh-stock-count-message"></div>';
  • JavaScript listens for variation selection (like size or color).
  • When a variation is selected, the script checks how many are left.
  • If the quantity is low, it displays:
    “Hurry! Only X left in stock.”
if (variation && variation.max_qty > 0 && variation.max_qty <= 5) {
    $('#rh-stock-count-message').html('<p style="color:red;">Hurry! Only ' + variation.max_qty + ' left in stock.</p>');
}

Step 3: Show Stock Message for Simple Products

This part checks if the product is:

  • A simple (non-variable) product
  • Stock is being managed
  • Stock is greater than 0 and less than or equal to 5

If all conditions match, it displays the message directly using PHP.


Where Will the Message Appear?

The message is displayed on the single product page, just below the product summary area (usually after the price or variation options).


How to Use

  1. Go to your WordPress Dashboard.
  2. Navigate to Appearance > Theme File Editor.
  3. Open the functions.php file of your active theme.
  4. Paste the full code at the bottom of the file.
  5. Save changes.

Now go to any product page and test it out!


Customization Tips

  • Want to change the color? Modify this line: <p style="color:red;">
  • Want to change the threshold? Update this line: $stock_threshold = 5;
  • Want to translate the message? Replace the English string with your preferred language.

Final Thoughts

This simple customization adds a powerful psychological trigger to your store. When shoppers see that items are running low, they’re more likely to act fast — which can help increase your conversions.

Rashed Hossain
Rashed Hossain

As an experienced WordPress professional, I specialize in theme and plugin development with a robust background in product and project management. My commitment lies in delivering top-notch solutions that align with client needs and surpass expectations.

Articles: 29

Leave a Reply

Your email address will not be published. Required fields are marked *