WooCommerce Custom Preorder

Allow customers to preorder a product if it is out of stock, without either party having to commit to ordering/supplying the product. This gives the company the opportunity to establish with the supplier if and/or when the product may be available again, and then to contact the customer to determine if they are happy with the timeframe and wish to proceed with placing an order.

This plugin places a “Preorder Now” button in place of “Read More” when a product is out of stock, based on the presence of an attribute set on the product.

Some setup is required for this plugin to work once installed.

Note: as a minimum, this plugin requires WooCommerce and Elementor installed to work.

How it Works

Code is added to the themes functions.php, such that when a product is displayed on a product archive page, in the related products section or on a single product page it determines what type of button to present to the user. This code can be adjusted to the website needs.

For example if the website uses the YITH WooCommerce Waiting List plugin it can be coded to show the YITH waiting list buttons if the item is out of stock and the “Out of stock action” attribute is either not set, or is set to “Waiting List”. And if the “Out of stock action” attribute is set to “Preorder” to show the “Preorder Now” button. 

The “Preorder Now” button when displayed on a product if clicked, displays a popup window that explains the preorder process. If the user then clicks the “Submit Preorder” button in the popup window, an email will be sent to the customer and to the admin email. The admin email address used can be configured in the WooCommerce emails section.

Setup Summary

  • Step 1 – In WooCommerce –> Products –> Attributes create an Attribute called “Out of stock action” with slug “out-of-stock-action”
  • Step 2 – In WooCommerce –> Products –> Attributes –> Out of stock action, add the terms “Waiting List” with slug “waiting-list” and “Preorder” with slug “preorder”
  • Step 3 – Create a page or popup template in Elementor with slug “preorder-popup” which will contain the content of the popup displayed to the Customer when they click on the “Preorder Now” button.
  • Step 4 – Install the plugin WooCommerce Custom Preorder and Activate the plugin
  • Step 5 – Configure the settings for the Preorder Admin and Preorder Customer emails in WooCommerce –> Settings –> Emails
  • Step 6 – Add code to the child themes functions.php instructing WordPress to use the plugin code when products are out of stock and have the “preorder” value set for the “Out of Stock” attribute.

Step 1 - Setup Attribute

In WordPress go to Attributes under Products and add the “Out of stock action” attribute with a slug “out-of-stock-action”.

Add Out of Stock action attribute

Step 2 - Setup Attribute Terms

Having completed Step 1 you should now see an “Out of stock action” attribute in the list. 

Choose “Configure terms” to setup the attribute terms.

Setup 2 terms

  1. Waiting List with slug waiting-list
  2. Preorder with slug preorder
Waiting List term
Preorder term

Step 3 - Create Popup

In Elementor create a template of either type “Page” or “Popup” and design it to include the content you wish to show the user when they click the “Preorder Now” button.

Step 4 - Install WooCommerce Custom Preorder plugin

Install and activate the WooCommerce Custom Preorder plugin in the same manner you would any other plugin.

Step 5 - Configure emails

In WooCommerce –> Settings –> Emails you can configure the settings for the Preorder Admin and Preorder Customer emails.

For example you can change the default Admin recipient email, and the subject, email heading and email content.

Configure emails settings

Step 6 - Add functions.php code

Code needs to be added to the functions.php file of the child theme being used, before the plugin will start to work.
The code needs to define the functions woocommerce_template_loop_add_to_cart and woocommerce_template_single_add_to_cart. Code will be provided as needed.