Search the site:

Home Blog How to add custom fields to WooCommerce products & subsequently through the order cycle

How to add custom fields to WooCommerce products & subsequently through the order cycle

When you are working with WooCommerce and want to add some extra information to your product page, you can do this by adding custom fields to the products. These custom fields are also referred to as item meta and can be displayed on the cart page, checkout page, and emails too. Cart item meta is when extra product fields are added to the products in the cart. And order item meta is when that information is saved for the order.

In this post, we will see how to add cart & order item meta for WooCommerce. We can add the item meta in just simple 4 steps.

  1. Add custom data fields to WooCommerce Product page
  2. Add custom data to the WooCommerce cart item meta
  3. Display custom data on WooCommerce cart and checkout page
  4. Add custom data to the WooCommerce order item meta

1. How to add custom data fields to the WooCommerce Product page

I need 2 fields as custom data on my cart and checkout page. I have added Name & Message fields on my Product page. We will add these fields data as Cart Item meta and Order Item meta so it will be displayed throughout the order cycle.

To add these fields I have used WooCommerce action hook woocommerce_before_add_to_cart_button. This action hook allows you to add custom content before the Add to cart button on the product page.

You can add custom fields using action as shown below:

In my example, I have used simple product type and named as “Gift Card”. Once you have added the code snippet, you will have 2 fields on the WooCommerce product page. You can replace it with any other type of fields as you need.

Add Cart & Order item meta for WooCommerce - before add to cart button
Custom fields before Add to Cart button

 

2. Add custom data to the WooCommerce cart item meta

Now, we want the data of these fields to be added to their respective cart item. To add these data we will use WooCommerce filter woocommerce_add_cart_item_data. This filter allows us to add the custom data to the cart item meta. 

Let’s see how to add the custom data to the cart item data.

This filter will be called when you will click on the Add to cart button on the product page. In my example, you can check that I have created 1 array called “$custom_data“, in this array I will add my data. I will add the data from $_POST array, which will contain array key as ‘customer_name’ &  ‘customer_message’.

Above code snippet will add the custom data to your cart item. This data will be useful in our next step where we want to display the data on the cart page & checkout page.

3. Display custom data on WooCommerce cart and checkout page

Now, we want that custom data should display to the customers. To display that custom data we will use WooCommerce filter woocommerce_get_item_data

Let’s see how we can display the custom data on the cart and checkout page.

This filter allows you to add the custom data to the cart item. In my example, you can check that I have added 2 fields and its data. I have first checked that the added item contains custom_data.

If our custom data is present for the cart item then we will add our data in an array and pass it to the $other_data array. You need to add 2 keys to the array as name & display.

name – You need to give the name of the field.

display – You need to give the value of the field.

After adding above code the Cart page will display custom data as below:

Add Cart & Order item meta for WooCommerce - cart page
Cart Page

After adding above code snippet Checkout page will display custom data as below:

Add Cart & Order item meta for WooCommerce - checkout page
Checkout page

4. Add custom data to the WooCommerce order item meta

So far we have seen that we have added data to the cart items. Now, let’s add these custom fields in our order item meta.

Order item meta is the extra information displayed to your every item of the order. If you don’t add your extra information in order item meta, then it won’t shown in emails, order received a page, and on the edit order page.

To add it to the order item meta we will use WooCommerce action hook woocommerce_add_order_item_meta.

This action hook provides you 2 parameters as $item_id, $values. Using these two parameters we will add the order item meta. This action will be called when you will click on the Place order button on Checkout page.

In my example, I have checked if the $values array contains our custom data. If it contains then we will add our order item meta using wc_add_order_item_meta.

In function wc_add_order_item_meta you need to pass 3 parameters.

  1. Item id
  2. Name/Key of the item meta
  3. Value of the item meta

After adding above code, it will display the custom field data (order item meta) in the email, order received page & edit order page on the admin side.

Add Cart & Order item meta for WooCommerce - order item meta in email
Oder item meta in Email
Add Cart & Order item meta for WooCommerce - order received page
Order received page
Add Cart & Order item meta for WooCommerce - edit order
Edit order

Here is full code snippet of all above modules.


For 2 of our plugins, we have added custom fields to WooCommerce product page. That’s where the idea for writing this post came from.

The Booking plugin for WooCommerce adds two meta fields: Booking date & Booking time or Booking start date & Booking end date.

The Product Delivery Date Pro for WooCommerce plugin adds two fields – Delivery Date & Delivery Time.

Product Delivery date for WooCommerce

Have you ever tried doing this? What has your experience been? Let me know in the comments.

Browse more in: Code Snippets, WooCommerce, WooCommerce How Tos, WooCommerce Tutorials

7
Leave a Reply

avatar
2 Comment threads
5 Thread replies
6 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
BRETONVishal KothariD.ClientsSergeychristophe Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
christophe
Guest

Hi,

Where is the full snippet of code for the example above?
It says “Here is full code snippet of all above modules.” but nothing is shown…
I think that’s what I’m after. Please let me know where I can access it.

Kind regards
Christophe

Sergey
Guest
Sergey

Christophe
This is the full snippet you have to include it in the functions.php
Everything works fine

Christophe
Guest

Thanks, I got it working

D.Clients
Guest
D.Clients

Hello,

Thanks for this code. It works perfectly.

How can I hide the field if the value is null? lets say the user has an optional field and its null, it still shows in the cart. how can I hide this?

D.Clients
Guest
D.Clients

I was able to achieve it by using the condition “if( ! empty” on all the items in the array as per below:

if( ! empty( $cart_item[‘custom_data’][‘array_item’] ) )
$other_data[] = array( ‘name’ => ‘Description’,
‘display’ => $custom_data[‘array_item’] );

from purchased

Subscribe for more offers