Open with fade-zoom animation

Stay ahead...
Receive latest updates directly in your Inbox!

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 🙂

9 Comments

  • Chiru Reply

    can i update custom data ?

    2017-08-11 00:46:42
    • Nikhil Agrawal

      Yes, you can do it, make sure you understand the above steps. Updating will be similar to this.

      2017-08-11 23:12:50
  • Cody Reply

    Hello, thank you very much for this tutorial. I have not yet been able to make it work, but I did want to mention a few things I noted in your code:

    In step 2, the add_filter section is left out of the code sample and is in plain text above it with the description.

    In step 3, the function name does not match the filter name.

    add_filter('woocommerce_get_cart_item_from_session', 'twf_get_user_custom_data_data_session', 1, 3 );
    function bc_get_bike_config_data_session( $item, $values, $key ) {

    Should it be this instead?

    add_filter('woocommerce_get_cart_item_from_session', 'twf_get_user_custom_data_data_session', 1, 3 );
    function twf_get_user_custom_data_data_session( $item, $values, $key ) {

    In step 8 there is a missing closing parenthesis ")".

    if(!empty($all_meta_data['twf_user_custom_datas'])
    {

    2017-07-29 02:57:14
    • Nikhil Agrawal

      Hi Cody,

      I was using WooCommerce 3.0.1 but updated it to the latest 3.1.1 and everything worked fine.

      Can you check if the data is getting saved in session by printing the entire session and debugging it from there?

      2017-08-02 11:17:31
    • Cody

      Hi Nikhil,
      Thanks for your reply. I'm currently on WooCommerce Version 3.1.1, and I'm wondering if there's a chance I'm having a WooCommerce version conflict. Do you know up to what Version this code will work on? Many I see work up to Version 2.7. I've implemented the code, but the data from my AJAX call never makes it to the cart, and I'm having a hard time tracking down what is failing.

      Thanks in advance!

      2017-08-02 03:19:21
    • Nikhil Agrawal

      Hello Cody,
      Thank you for letting us know. Edited the post.
      What problem you're having making it work?

      2017-07-29 11:07:32
  • Michael Lewis Reply

    Thank you very much for this tutorial!

    Really saved my ass :)

    2017-07-10 03:44:37
    • Nikhil Agrawal

      Thank you, Michael.

      2017-07-17 09:54:18

Leave a comment

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