How to Add a “Back in Stock Notification” Feature in WooCommerce

A “Back in Stock Notification” is a great way to retain potential customers on your eCommerce site.
Instead of losing them when a product is out of stock, you can collect their email addresses and automatically notify them when the product becomes available again.

In this post, I’ll show you how to add a simple and effective “Notify Me When Available” form directly on the WooCommerce product page. This not only improves customer experience, but also increases your chance of turning a missed sale into a successful one.

Here’s what the final result will look like on the product page when an item is out of stock:

Before we dive into the code, it’s important to quickly explain the difference between the two stock statuses:

• Out of Stock (outofstock):
  Customers cannot purchase these products. This is the perfect situation where we want to offer a “Notify Me When Available” form.
• On Backorder (onbackorder):
  Customers can still place an order, even though the item is currently unavailable. It’s basically a pre-order feature.
  If you feel that customers might hesitate to buy something not immediately available, you can also show the notification form here.

In this post, I’ll focus on the “Out of Stock” case.

Now that we understand the stock statuses, the goal is to display the “Notify Me” form right after the “Out of Stock” message on the product page.

To do this, we need to choose the right WooCommerce hook.

There are many hooks available on the WooCommerce product page, but picking the right one can be tricky.
For example, some popular hooks like woocommerce_after_add_to_cart_button will not fire for out-of-stock products, making them useless for our purpose.

After some testing, I decided to use the woocommerce_product_meta_start hook.
It’s reliable, fires consistently even for out-of-stock products, and makes it easy to inject our form exactly where we want it.

<?php
add_action( 'woocommerce_product_meta_start', 'wprs_notify_when_back_in_stock_form' );

function wprs_notify_when_back_in_stock_form() {
	global $product;
	if( $product->is_in_stock() ) {
		return;
	}
	?>
		<form id="back-in-stock-notification" data-product_id="<?php echo $product->get_id() ?>">
			<input type="email" name="email" class="input-text" placeholder="Your email address" />
			<button class="wp-element-button">Join waitlist</button>
		</form>
	<?php
}

In this snippet, I want to highlight the condition $product->is_in_stock(). You could also use $product->get_stock_status() to check whether a product is out of stock — both methods essentially do the same thing. The only difference is that when using the first method, the woocommerce_product_is_in_stock filter hook is applied.

I also decided to include the product ID as a data attribute inside the form HTML.

Here’s our form: