Add and display a custom field on WooCommerce
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.
Our goal
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.
That’s it!
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.
22 responses to “Add and display a custom field on WooCommerce”
This was useful. Thanks a lot Nik.
Very useful thank u very much
Hey Nik, thanks for sharing this stuff. I was looking for such functionality for my customization in my customers woocommerce. Really impressive.
Hello!
Glad to hear you found the tutorial helpful!
This helped me a lot, Just what I was searching for, thanks Nik
Glad to hear you found the article useful!
Hello,
I’m creating similar custom field, but for woocommerce_product_options_general_product_data.
May I know how to include the custom field value to the wordpress search result?
Hello Nazrin. Have a look at this plugin which allows you to modify WordPress’ search functionality.
Hello NIK
This helped me a lot, please help how to quick edit that field?
thanks a lot
Hello!
Glad to hear you found this helpful. Adding quick edit functionality is rather complex to fit in a comment, so please check out this tutorial which might help you implement it.
Hi,
This looks very good! Is it possible to add this code to variable products or is it only simple products? If its not possible. Can we hire you for doing that code?
We need a text field on both simple and variable products where we can add text when the product is arriving back in our stock. Thanks in advance!
Hello Jens. The field added in this tutorial can’t display in variable products. You could take a look at this gist here which offers a way to add custom fields to variable products as well.
Best regards.
Hi Nik
Nice tutorial thank you
Can you tell me how can I display the notice under the product title ?
Thanks Yves
Hello Yves.
Check out this gist https://gist.github.com/nvourva/c2d84c819c033feabf4820e20544938c you can try using lines 36 – 47 instead of the Displaying the custom field from the post, to display the notice below the title.
Thank you for this helpful post.
How can I display this message in the thumbnail loop (gallery) instead of the single product page?
You’ll probably need to override the WooCommerce’s single-product/product-thumbnails.php file into your theme, since the only related filter ‘woocommerce_single_product_image_thumbnail_html’ fires for each thumbnail, therefore your field would be displayed after every thumbnail.
This is pretty good, thenks! Would it possible to have the extra info added under the actual product image and description in the shop category?
Hello Will.
Please check out this answer by WooCommerce’s support, I think it’s what you are looking for.
Thanks for this snippet!
The only flaw I noticed was that if you first save something to this field and then try to delete it, it doesn’t save the empty value. That’s because of this part, of course:
$my_restock_notice_textarea = $_POST[‘my_restock_notice’];
if ( ! empty( $my_restock_notice_textarea ) ) {
update_post_meta( $post_id, ‘my_restock_notice’, esc_html( $my_restock_notice_textarea ) );
}
So basically if you want to remove the text you added before, it’s not possible as the field is empty and the code above won’t do anything.
I just deleted the if-check here so it is possible to save an empty value too. If there is a drawback to this or a more wordpressy way to save the data, let me know.
Hello!
This is a great observation. You are indeed right that you can’t leave the field empty. The logic behind that was that the field was mandatory based on the fact that the site owner created a plugin to get the functionality and when the functionality was not needed any more the plugin could be turned off. I did not take into account using the field on some products while leaving it blank on others. Removing the check is just fine!
hi there. I made as a plugin too and paste the codes but does not work. I cannot see any restock field why?
Hello.
Does the plugin show up as enabled under the plugins tab in the WordPress dashboard?