If you have a WordPress site and are interested in selling anything, WooCommerce is most likely the way to go. Powered by Automattic, it is by far the most popular e-commerce plugin available for WordPress. It is supported by a very large community and it’s extended with themes and plugins by many third party authors.
Having established WooCommerce is pretty much a necessity when you need to sell something via a WordPress site, it stands to reason that there are some things it can’t do, not out of the box anyway.
In our example we’d like to display per-product restock notices, to let our customers know when an out of stock product will be available for purchase. Lucky for us WooCommerce is extendable and we can achieve the desired outcome with just a few lines of code. Let’s begin.
We are going to add a restock notice field in the Inventory section of the product’s data, as displayed below.
In this field we can add a piece of text informing our customers when the product will be back in stock. The line will be displayed below the out of stock notice, as seen in the following image.
Creating the plugin file
Let’s create the main file that will contain our plugin’s code. Using an FTP client navigate to /wp-content/plugins/ in your WordPress installation and create a folder called ci-custom-product-fields (or anything else you prefer). Next enter the folder and create a file called ci-custom-product-fields.php (again, naming is up to you).
Edit the file and paste in a header similar to the one below:
Now that our plugin file is set up we can proceed with entering the code.
Creating our custom field
To add our new field we’ll need to hook into the product options’ stock fields. If you are not sure what hooks and filters are, we have a nice article for you here. To learn more about WooCommerce’s hooks, you can check out the hook reference chart here.
Now that we’re caught up with hooks and filters on we go.
Adding the field
As mentioned we will hook into woocommerce_product_options_stock_fields to add the field in the inventory tab. To do that paste in the following code:
In this example we’re going to go with a textarea field, hence the usage of woocommerce_wp_textarea_input there are of course other input types, such as text fields, checkboxes, radio buttons etc. You can read about them here.
The properties used above are pretty straight forward, the id is, well, the field’s id, the placeholder is the piece of text that will appear in the textarea when no data has been entered, the label appears to the left of the text area describing its function, the description describes what the field does in more detail, and finally the desc_tip hides the description in the ? to the right of the text area and shows it to the user once it’s hovered, giving a cleaner appearance. Save and it’s done, the field has been added, you can refresh the product edit page to see it.
Saving entered data
We have added the custom field but unless we save the data that’s entered it’s of no particular use. To do that we hook into woocommerce_process_product_meta and let WooCommerce know we want to save the data. Do that by pasting in the code below:
What we do above is first check if stock management is enabled in WooCommerce and if it is we proceed. Next we check if the user has added something in the restock notice field, if they have we save it along with the rest of the product’s metadata.
Displaying the custom field
Now that we have successfully created the custom field and taken care of data persistence, we need to display it. As mentioned earlier we want to display it just below the out of stock notice, to do that we will filter the stock notice’s html to add our restock notice along. Do that using the code below:
In the code above we take care to display the message only if there is actually some text in the restock notice textarea and if the product is not in stock. We add our html to the already existing one and we return them all together.
We’ve done it. You can save your file, refresh your product edit page and fill in something to the restock notice textarea, update the product and check it out! Just make sure that the product is actually out of stock, otherwise the restock notice will not display.
We hope you found this small tutorial handy. If you have any questions, or want to share your awesome implementation of this, let us know in the comments below.