In this guide you will learn how to add a custom field to the WooCommerce product data area. This is a useful skill to learn as it will allow you to customise the data you can enter in a familiar and easy-to-use area, and display the custom field data on the frontend of the website. While you can use the custom fields option to add custom data, these fields are not always the easiest to navigate, and if you enter the field slightly incorrectly on a product, the data will not be shown on the frontend. Additionally, while plugins do exist that can simplify this process, this reduces the need for additional plugins on your website, which is always a good thing.
There are several areas that can be used to add a custom field.
General tab: You can use the following option group locations. The following three locations form part of the option groups.
woocommerce_product_options_pricing
woocommerce_product_options_downloads
woocommerce_product_options_taxIf you want to create a new option group and can do so by wrapping the field in an option_group div as shown below using the woocommerce_product_options_general_product_data hook.
/**
* Snippet: How to add a custom field to WooCommerce product data and display it on the frontend 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?773
* Tested with WooCommerce 8.8.2
* "Create option group"
*/
add_action( 'woocommerce_product_options_general_product_data', 'wcsuccess_option_group' );
function wcsuccess_option_group() {
echo '<div class="option_group">Welcome new option group</div>';
}Inventory tab: The below hooks can be used in the inventory tab
woocommerce_product_options_stock_status
woocommerce_product_options_sold_individually
For custom groups use the following with the option_group class
woocommerce_product_options_inventory_product_dataShipping tab: The below hooks will allow addition of fields to the shipping tab
woocommerce_product_options_dimensions
woocommerce_product_options_shippingUnfortunately, the shipping tab doesn’t allow custom ption groups
Linked products tab: This tab contains one hook only and no custom options groups
woocommerce_product_options_relatedAdvanced tab: contains two options groups.
woocommerce_product_options_reviews
woocommerce_product_options_advanced With the locations out of the way, it’s necessary to understand the different types of options that can be added. Like all forms, all fields can be added, but you don’t just add it using plain HTML markup. You need to add it the WooCommerce way using PHP functions defined in WooCommerce. They are as follows.
Checkbox: woocommerce_wp_checkbox()
Text input: woocommerce_wp_text_input()
Textarea: woocommerce_wp_textarea_input()
Select: woocommerce_wp_select()
If you are using the checkbox function there are two values. To have it checked it requires a value of yes, and empty for unchecked.
The functions contain a PHP array of options and values.
id: The id of the field
type: used with the woocommerce_wp_text_input function and accepts text input type arguments such as text, date, password and email
value: This will return the meta_value of the field when saved and contains the meta_key name
label: The field label
desc_tip: Contains true of false. when set to true the description will appear as a tooltip and when false it will appear as a plain text description
description: Contains the description of the field
Now that we know where we can place the custom fields and the parameters required, let’s begin to build our custom field.
Step 1: Add the custom field to the product data area
We will add a custom field to the inventory tab at stock status to display a message about the product back in stock date. This will display a custom field with a date picker in the inventory tab.
/*
* Snippet: How to add a custom field to WooCommerce product data and display it on the frontend 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?773
* Tested with WooCommerce 8.8.2
* "Add the custom field to the product data area"
*/
add_action( 'woocommerce_product_options_stock_status', 'wcsuccess_custom_product_field' );
function wcsuccess_custom_product_field(){
woocommerce_wp_text_input(
array(
'id' => 'back_in_stock',
'type' => 'date',
'value' => get_post_meta( get_the_ID(), 'back_in_stock', true ),
'label' => 'Back in stock date',
'desc_tip' => true,
'description' => 'Enter the date the product is expected to be back in stock',
)
);
}Step 2: Save the data
The following code will save the data to the product as post_meta and can be called on the frontend
/*
* Snippet: How to add a custom field to WooCommerce product data and display it on the frontend 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?773
* Tested with WooCommerce 8.8.2
* "Save custom field data for the product"
*/
add_action('woocommerce_process_product_meta', 'wcsuccess_product_custom_fields_save');
function wcsuccess_product_custom_fields_save($post_id){
$back_in_stock_date = $_POST['back_in_stock'];
if (!empty($back_in_stock_date )) {
update_post_meta($post_id, 'back_in_stock', esc_attr($back_in_stock_date ));
}
}
Step 3: Display the data on the frontend
Using our WooCommerce product page visual hooks guide as a reference, we can display this data on the single product page. We will display it after the add to cart button
/*
* Snippet: How to add a custom field to WooCommerce product data and display it on the frontend 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?773
* Tested with WooCommerce 8.8.2
* "Show add on field based on the saved custom field"
*/
add_action('woocommerce_after_add_to_cart_form', 'wcsuccess_display_custom_option_value');
function wcsuccess_display_custom_option_value(){
$product = wc_get_product(get_the_ID());
$back_in_stock = $product->get_meta('back_in_stock');
if(isset($back_in_stock) && !empty($back_in_stock)) {
_e('<p>This item will be back in stock on: ' . $back_in_stock . '</p>', 'wordpress');
}
}
Step 4: Display the field in the cart page
/*
* Snippet: How to add a custom field to WooCommerce product data and display it on the frontend 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?773
* Tested with WooCommerce 8.8.2
* "Display option in the cart"
*/
add_filter( 'woocommerce_get_item_data', 'wcsuccess_display_field_cart', 10, 2 );
function wcsuccess_display_field_cart( $cart_data, $cart_item ) {
$custom_items = array();
if( !empty( $cart_data ) )
$custom_items = $cart_data;
// Get the product ID
$product_id = $cart_item['product_id'];
if( $custom_field_value = get_post_meta( $product_id, 'back_in_stock', true ) )
$custom_items[] = array(
'name' => __( 'Back in stock', 'woocommerce' ),
'value' => $custom_field_value,
'display' => $custom_field_value,
);
return $custom_items;
}
Step 5: Display the custom field on the checkout page
/*
* Snippet: How to add a custom field to WooCommerce product data and display it on the frontend 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?773
* Tested with WooCommerce 8.8.2
* "Display option in the checkout"
*/
add_filter('woocommerce_cart_item_name', 'wcsuccess_checkout_display', 10, 3);
function wcsuccess_checkout_display($name, $cart_item, $cart_item_key){
if (isset($cart_item['back_in_stock'])) {
$name .= sprintf('<p>%s</p>', esc_html($cart_item['back_in_stock']));
}
return $name;
}
Step 6: Display the custom field in the email as part of the product line item
In this snippet the custom field is saved in the order item meta data.
/*
* Snippet: How to add a custom field to WooCommerce product data and display it on the frontend 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?773
* Tested with WooCommerce 8.8.2
* "Display the custom field in the email as part of the product line item"
*/
add_action( 'woocommerce_checkout_create_order_line_item', 'wcsuccess_add_custom_field_to_order_item_meta', 20, 4 );
function wcsuccess_add_custom_field_to_order_item_meta( $item, $cart_item_key, $values, $order ) {
$custom_field_value = get_post_meta( $item->get_product_id(), 'back_in_stock', true );
if ( ! empty($custom_field_value) ){
$item->update_meta_data( __('Back in stock', 'woocommerce'), $custom_field_value );
}
}
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Google Scholar ID: https://scholar.google.com.au/citations?user=0KvpwNEAAAAJ&hl=en
ORCID: https://orcid.org/0000-0001-8113-1296
Stay In Touch
