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:

<?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.

 

8 comments

  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.

    1. Nik Vourvachis says:

      Hello!

      Glad to hear you found the tutorial helpful!

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

    1. Nik Vourvachis says:

      Glad to hear you found the article useful!

  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?

    1. Nik Vourvachis says:

      Hello Nazrin. Have a look at this plugin which allows you to modify WordPress’ search functionality.

Leave a Reply

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