Back in Stock Notifications for a WooCommerce Store

In this step-by-step tutorial I am going to show you how to add a “notify me when back in stock” kind of form to your WooCommerce product pages which will allow you to collect emails from customers and when a product is actually back in stock to automatically send notifications to everyone who was previously subscribed.

This feature is also called a waitlist. Below is an example how it works:

In this tutorial it is going to be a lot of code and its explanation, but if you’re looking for a plugin-based solution, just leave a comment below or contact me.

But now – let’s dive into it!

“Notify me when back in stock” Form on Product Pages

First of all let’s just go ahead and add the form to the product pages.

We need to do that only for products and variations with either “Out of stock” outofstock or “On backorder” onbackorder statuses (or both) – which option is more convenient for you.

Or probably you would like to do it for a custom product stock status – no problems at all!

Difference between “Out of stock” and “On backorder” stock statuses

Let me explain the difference:

• “Out of stock” outofstock – customers can not purchase these kind of products but they can use our “Notify me when back in stock” form,
• “On backorder” onbackorder – customers can purchase products with this stock status, but they can not get them immediately, only when products become available in the future (just a regular preorder feature). The form is needed in case they are not comfortable to purchase the products which aren’t currently in stock.

In this tutorial I am going to use the “Out of stock” status.

Displaying the form

Ok, we’ve figured out the stock status thing and now our goal is to display the “notify me when back in stock” form right after the “out of stock” text on product pages and we need to choose a specific WooCommerce hook for that.

There are plenty of hooks available on WooCommerce product pages and choosing the one can be a little bit tricky, because you can not use some of them, for example the action hook woocommerce_after_add_to_cart_button is never triggered for products which are out of stock.

In my example I decided to use woocommerce_product_meta_start.

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

function rudr_notify_when_back_in_stock_form() {
	global $product;
	// obviously we don't need to collect emails for back in stock notifications for products which are in stock anyway
	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 code snippet I’d like to highlight the $product->is_in_stock() condition, you can also use $product->get_stock_status() and check whether its value is outofstock or not, but these two methods are completely identical. Well, the only difference is the filter hook woocommerce_product_is_in_stock which is applied if you’re using the first method.

I also decided to put a product ID into the form HTML as a data attribute.

And here we go, our form:

The form looks nice so far but in order to make it even more nicer we can either add a heading “Get notified when this product is back in stock” or even better – we can make this text a part of the availability text. Let’s do it in the next chapter of this tutorial.

Changing availability text for “Out of stock” status

As I said before – it would be great to provide just a little bit more information to our customer what this form is all about. And we can either add a heading to the form or just slighly change the availability text for the “Out of stock” status only.

add_filter( 'woocommerce_get_availability_text', 'rudr_out_of_stock_text', 25, 2 );

function rudr_out_of_stock_text( $text, $product ) {
	
	if( is_product() && ! $product->is_in_stock() ) {
		$text = 'Out of stock – Join the waitlist and get emailed when this product is back in stock';
	}
	return $text;

}

I am also using is_product() condition here, because who knows, maybe in your theme the availability text is going to be displayed on the shop page or something.

Here we go:

Processing the form asynchronously (via AJAX)

I am going to begin with the main question you may have at this moment – “Why jQuery?” Primarily because of two reasons:

1. WooCommerce still includes jQuery on a store frontend. So as long as it is included anyway, there is nothing to worry about.
2. I’m always trying to make my tutorials easy to understand for everyone, and a lot of my readers are still struggling with JavaScript.

But yes, if I created a plugin for this purpose, I would try to avoid using jQuery if possible.

jQuery( function( $ ) {
	$( '#back-in-stock-notification' ).submit( function() {

		const emailField = $(this).find( 'input[type="email"]' )
		const submitButton = $(this).find( 'button' )
		const productId = $(this).data( 'product_id' )

		$.ajax( {
			url : woocommerce_params.ajax_url,
			type : 'POST',
			data : {
				email : emailField.val(),
				product_id : productId,
				action : 'back_in_stock_notification',
			},
			beforeSend : function( xhr ) {
				// change the button text
				submitButton.text( 'One moment...' )
				// clean up notifications
				$( '.woocommerce-notices-wrapper' ).find( '#my-notice' ).remove()
			},
			success : function( response ) {
				// change back the button text
				submitButton.text( 'Join waitlist' )
				if( response.success ) {
					// empty the email field
					emailField.val( '' )
					// display a notification
					$( '.woocommerce-notices-wrapper' ).append( '<div id="my-notice" class="wc-block-components-notice-banner is-success" role="alert"><div class="wc-block-components-notice-banner__content">' + response.data + '</div>' )
				}
			}

		} )
		return false
	} )
} )

And now we need to process our AJAX request, it can be done easily in a WordPress-way with wp_ajax_ and wp_ajax_nopriv_ action hooks.

add_action( 'wp_ajax_back_in_stock_notification', 'rudr_create_notification' );
add_action( 'wp_ajax_nopriv_back_in_stock_notification', 'rudr_create_notification' );

function rudr_create_notification() {

	// here we need to process the user email and add it into our database
	
	$success_notice_text = 'You will be notified!';
	wp_send_json_success( $success_notice_text );
	
}

As a result, we have a nice AJAX back in stock notification form:

Great, the form is ready but in fact it doesn’t collect emails, so there is no way we can send back in stock notifications right now – it is time to procees to the next part of the tutorial.

Deciding How to Store Emails in the Database

I can imagine three options how we can do it:

In this tutorial I am going to use the first method.

Let’s begin with creating a custom field for products. I think it would be nice to create a simple textarea field in the “Inventory” tab, something like this:

It can be done pretty easily with this code:

add_action( 'woocommerce_product_options_stock_status', function(){

	$list = ( $list = get_post_meta( get_the_ID(), 'email_list', true ) ) ? $list : array();

	echo '<div class="option_group">';
	woocommerce_wp_textarea_input(
		array(
			'id'      => 'email_list',
			'value'   => join( "\n", $list ),
			'label'   => 'Waitlist',
			'description' => 'Emails for back in stock notifications',
			'desc_tip' => true,
		)
	);
	echo '</div>';
} );

add_action( 'woocommerce_process_product_meta', function( $product_id ) {
	
	// we store emails in the database as a serialized array
	$list = isset( $_POST[ 'email_list' ] ) ? explode( "\n", $_POST[ 'email_list' ] ) : array();
	// we can use $product->update_meta_data() here as well
	update_post_meta( $product_id, 'email_list', $list );

} );

And then we just need to add the missing stuff into our AJAX processing:

function rudr_create_notification() {
	
	$product_id = absint( $_POST[ 'product_id' ] );
	
	$product = wc_get_product( $product_id );
	// it is good to check if this product exists
	if( ! $product ) {
		wp_send_json_error();
	}
	// it is also good to check if product status is out of stock
	if( $product->is_in_stock() ) {
		wp_send_json_error();
	}
	
	// don't forget to check if a email is correct
	$email = $_POST[ 'email' ];
	
	if( ! is_email( $email ) ) {
		wp_send_json_error();
	}
	
	$list = ( $list = $product->get_meta( 'email_list' ) ) ? $list : array();
	
	$list[] = $email;
	
	$product->update_meta_data( 'email_list', $list );
	$product->save();
	
	...

Sending Back in Stock Notifications

First of all we need to decide here which of the WooCommerce hooks we’re going to use.

For example when you’re working with WooCommerce orders, there is a very nice hook woocommerce_order_status_changed, which allows to pass both new and old order statuses to the callback function, so we can check its previous order status. There is no such hook for product stock statuses, so it is not that easy to get both previous and new product stock statuses, but there are another two very nice hooks.

• woocommerce_product_set_stock_status – this one is fired when a product stock status is actually changed. It means that if your product was out of stock, then you updated its price for example, the product is still out of stock, the hook is not going to be triggered.
• woocommerce_product_set_stock – the same, but works for the product stock quantity.

It seems that woocommerce_product_set_stock_status is exactly what we need!

add_action( 'woocommerce_product_set_stock_status', 'rudr_back_in_stock', 25, 3 );

function rudr_back_in_stock( $product_id, $stock_status, $product ) {
	
	// the product is back in stock, we can now send a notification
	if( 'instock' === $stock_status ) {
		
		$emails = $product->get_meta( 'email_list' );
		if( $emails ) {
			// it is very simplified here
			wp_mail( 
				$emails, 
				'The product is back in stock!', 
				sprintf( 
					'The product %s is back in stock! Check it out %s!',
					$product->get_name(),
					$product->add_to_cart_url()
				)
			);
			$product->delete_meta_data( 'email_list' );
			$product->save();
		}
		
	}
}

One more thing…

Sometimes a functionality which may seem simple in fact could have a lot of pitfalls and some unique scenarios which should be kept in mind while developing it.

The same is here – if you have looked through this tutorial, you may have a thought that creating back in stock notifications in WooCommerce by yourself isn’t such a big deal, but let me remind you about a couple of things:

• Email confirmations and some basic antispam protection,
• Using action scheduler or WP Cron when we need to send a lot of back in stock notifications at the same time.
• And of course it is better to use custom database tables.

Probably there are more things to consider, these are just the first ones that came to my mind.

WooCommerce Plugins for Back in Stock Notifications

In this part of the tutorial I wanted to recommend you some of the plugins which allow to set up back in stock notifications for your WooCommerce store, but the truth is, at this moment I have nothing to recommend you.

The ones I found either have a low rating from its users or use custom post types to store emails.

If you want me to develop this plugin, just leave a comment below or contact me.

# WooCommerce, Product inventory

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X