Add and display a custom field on WooCommerce

Last Updated On
Add and display a custom field on WooCommerce WordPress template

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:

<?php

/**
* Plugin Name: Custom Product Fields for WooCommerce
* Description: This small plugin will generate and display a custom product field.
* Version: 1.0.0
* Author: nik
*/
Custom Product Fields

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:

add_action( 'woocommerce_product_options_stock_fields', 'my_restock_notice_field' );
function my_restock_notice_field() {
global $woocommerce, $post;
woocommerce_wp_textarea_input(
array(
'id' => 'my_restock_notice',
'placeholder' => 'Back in stock next week!',
'label' => 'Restock notice',
'description' => 'Let your customers know when the product will be back in stock.',
'desc_tip' => 'true',
)
);
}
Add the custom field

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:

add_action( 'woocommerce_process_product_meta', 'my_restock_notice_save_data' );
function my_restock_notice_save_data( $post_id ) {
if ( 'no' === get_option( 'woocommerce_manage_stock' ) ) {
return;
}

$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 ) );
}
}

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:

add_filter( 'woocommerce_get_stock_html', 'my_restock_notice_display', 10, 2 );
function my_restock_notice_display( $html, $product ) {
$notice = get_post_meta( $product->get_ID(), 'my_restock_notice', true );
$stock_status = $product->get_stock_status();

if ( empty( $notice ) || 0 < $product->get_stock_quantity() || 'outofstock' !== $stock_status ) {
return $html;
}

$html .= '<p class="my-restock-notice">' . esc_html( $notice ) . '</p>';

return $html;
}
Display restock notice

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”

  1. Daniel says:

    This was useful. Thanks a lot Nik.

  2. Henry says:

    Very useful thank u very much

  3. Lucky says:

    Hey Nik, thanks for sharing this stuff. I was looking for such functionality for my customization in my customers woocommerce. Really impressive.

  4. This helped me a lot, Just what I was searching for, thanks Nik

  5. Nazrin says:

    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?

  6. moma says:

    Hello NIK
    This helped me a lot, please help how to quick edit that field?
    thanks a lot

    • Nik Vourvachis says:

      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.

  7. Jens says:

    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!

    • Nik Vourvachis says:

      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.

  8. Yves says:

    Hi Nik
    Nice tutorial thank you
    Can you tell me how can I display the notice under the product title ?
    Thanks Yves

  9. Juergen says:

    Thank you for this helpful post.
    How can I display this message in the thumbnail loop (gallery) instead of the single product page?

    • Anastis Sourgoutsidis says:

      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.

  10. Will says:

    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?

  11. Tuukka says:

    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.

    • Nik says:

      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!

  12. Volkan says:

    hi there. I made as a plugin too and paste the codes but does not work. I cannot see any restock field why?

Leave a Reply

Your email address will not be published. Required fields are marked *

Get access to all WordPress themes & plugins

24/7 Support Included. Join 115,000+ satisfied customers.

Pricing & Sign Up

30-day money-back guarantee. Not satisfied? Your money back, no questions asked.

Back to top