We have previously seen how we can add custom data to a WooCommerce order in 6 simple steps. That approach comprised of the addition of data to a custom session, extracting it from the WooCommerce Session, and inserting it into the Cart. The data would then be displayed on the Cart and Checkout Page.
However, this approach was limited to WooCommerce versions prior to v3.0.
Now, we have a solution for v3.0 and above, with a brand new strategy as well!
Most of the steps in the procedure remain the same. However, we are doing away with the need to add data to the WooCommerce Session. Instead, we will be adding the data directly to the WooCommerce Cart.
Let’s see how. Here is the code compatible with WooCommerce 3.0+.
Step 1: Adding Custom Field for Product
We previously made use of a WooCommerce session for adding custom fields in WooCommerce session & ultimately to WooCommerce Cart object. Let’s consider the alternative method for this.
The code below can be used to add a Custom Field for Product.
<?php add_action('woocommerce_before_add_to_cart_button','wdm_add_custom_fields'); /** * Adds custom field for Product * @return [type] [description] */ function wdm_add_custom_fields() { global $product; ob_start(); ?> <div class="wdm-custom-fields"> <input type="text" name="wdm_name"> </div> <div class="clear"></div> <?php $content = ob_get_contents(); ob_end_flush(); return $content; }
If we need to modify Price based on the parameter selection/value entered by the User in our custom fields, we can use ‘woocommerce_before_calculate_totals‘ action to set additional Price.
Step 2: Add Customer Data to WooCommerce Cart
Now, we need to add customer entered data into WooCommerce Cart. We can achieve this using the following functionality. Here, we are setting key as ‘name‘.
<?php add_filter('woocommerce_add_cart_item_data','wdm_add_item_data',10,3); /** * Add custom data to Cart * @param [type] $cart_item_data [description] * @param [type] $product_id [description] * @param [type] $variation_id [description] * @return [type] [description] */ function wdm_add_item_data($cart_item_data, $product_id, $variation_id) { if(isset($_REQUEST['wdm_name'])) { $cart_item_data['wdm_name'] = sanitize_text_field($_REQUEST['wdm_name']); } return $cart_item_data; }
Step 3: Display Details as Meta in Cart
We can display the details entered by User as meta in Cart using the below snippet.
<?php add_filter('woocommerce_get_item_data','wdm_add_item_meta',10,2); /** * Display information as Meta on Cart page * @param [type] $item_data [description] * @param [type] $cart_item [description] * @return [type] [description] */ function wdm_add_item_meta($item_data, $cart_item) { if(array_key_exists('wdm_name', $cart_item)) { $custom_details = $cart_item['wdm_name']; $item_data[] = array( 'key' => 'Name', 'value' => $custom_details ); } return $item_data; }
Step 4: Add Custom Details as Order Line Items
We need to add the below code to add custom details entered by customers as extra details for order line items, using the following code.
<?php add_action( 'woocommerce_checkout_create_order_line_item', 'wdm_add_custom_order_line_item_meta',10,4 ); function wdm_add_custom_order_line_item_meta($item, $cart_item_key, $values, $order) { if(array_key_exists('wdm_name', $values)) { $item->add_meta_data('_wdm_name',$values['wdm_name']); } }
That’s it! You are good to go! If you have any query, feel free to add it in the comments section below.
Is WooCommerce customization or development still giving you a headache?
Talk to us and we can help you out!