Adding Custom Data for Products During Add To Cart

Adding Custom data to WooCommerce Order during ‘Add to cart’

I was working on an E-Commerce application using WooCommerce WordPress plugin. Here the requirement was users can add custom information for each product they ‘add to cart’. The task seemed difficult at the beginning but after understanding the various hooks it was just a series of steps that needed to be followed and it worked like a charm.

In this post, you will find a step-by-step detailed explanation which will definitely help you to achieve the objective of adding custom information for products during ordering.

Practical use cases:

  1. Users can provide their own slogans/Quotations/Logos to be printed in T-Shirt / other accessories they purchase.
  2. Users can choose a product and configure it according to their needs, like for example Car – they can select a car, and configure the engine, tire types, etc and based on it the products price will change.

Steps to add custom data for a product during ‘add to cart’:

1. Add the custom data in session on click of ‘Add to cart’:

On Click of ‘Add To Cart’ button make an ajax call to store the custom entered data in session

2. Add the Custom Data from Custom Session to WooCommerce Session:

In Step 1 we added the custom data to our created session on click of ‘Add To Cart’ button. After clicking on add to cart the products gets added to cart and WooCommerce session gets created for it. In this step, we will add our custom data to WooCommerce data for this “particular product”.


3. Add the custom data to WooCommerce cart object

WooCommerce creates a cart object to display all the products added to cart. We need to add the custom information in the cart during checkout. So add the information in cart object.

4. Display Custom data in cart and Checkout page

The custom data is already present in cart object, so you can display it in the cart where the product is displayed.

5. Add custom data as Metadata to Order Items table

We need to store the custom data in our Order Items MetaData table so that admin can view the information entered and deliver the products accordingly.

6. Remove User Custom Data, if Product is Removed from Cart

We also need to remove the custom data if the user removes the product from cart.

7. Additional price based on custom data

Sometimes you may need to calculate an additional price based on entered information. So here we can calculate the price.

8. Display the Custom data in Admin’s Order page

By Default, WooCommerce will display the custom information from metadata table. But if you like to format the way it displays it can be done as below.

  • Hide the order meta fields

  • Show the users custom field in a formatted way

That’s all we need to complete the process of adding custom information during adding products to cart. We can also add the custom information in the Order Confirmation Email by looking into the hooks provided by wooCommerce.

In case you find something missing please comment below.

* * *

Also, let me know if find the post useful, it motivates me to keep posting more 🙂

No Comments

Leave a comment

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