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.
- Add custom data fields to WooCommerce Product page
- Add custom data to the WooCommerce cart item meta
- Display custom data on WooCommerce cart and checkout page
- 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.
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.
Increase WooCommerce Store Sales
"This fully customizable plugin has saved us $6,997.81 over the last 5 months in abandoned orders. If you’re on the fence, don’t think twice. Abandoned Cart Pro pays for itself really quickly." - Miroslav Mazalica
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:
After adding above code snippet Checkout page will display custom data as below:
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.
- Item id
- Name/Key of the item meta
- 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.
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.
Have you ever tried doing this? What has your experience been? Let me know in the comments.