In this artcle we will learn how to save and show a custom field as order item meta in woocommerce. Here I suppose to save a COLOR custom field with each of order item in woocommerce.
All the following code goes in function.php file of your active child theme (or active theme).
Step-1: First add custom field on single product page using following code. We use custom_color as slug of our custom field Color
|
1 2 3 4 5 |
// Add the field on Single Product page add_action('woocommerce_before_add_to_cart_button', 'my_custom_checkout_field'); function my_custom_checkout_field() { echo '<div id="customColorWrapper"><label>Color:</label><input type="text" name="custom_color" id="custom_color" /></div>'; } |
Step-2: Next, We need to save this custom fields in our cart along with item using following code:
|
1 2 3 4 5 6 7 8 9 10 |
// Save custom field label and value in cart add_filter( 'woocommerce_add_cart_item_data', 'save_my_custom_checkout_field', 10, 2 ); function save_my_custom_checkout_field( $cart_item_data, $product_id ) { if( isset( $_REQUEST['custom_color'] ) ) { $cart_item_data['custom_color']['label'] = "Color"; $cart_item_data['custom_color']['value'] = sanitize_text_field( $_REQUEST['custom_color'] ); $cart_item_data['custom_color']['ukey'] = md5( microtime().rand() ); } return $cart_item_data; } |
Step-3: Next, we need to show this custom field on cart and checkout page using following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Display items custom fields label and value in cart and checkout pages add_filter( 'woocommerce_get_item_data', 'render_meta_on_cart_and_checkout', 10, 2 ); function render_meta_on_cart_and_checkout( $cart_data, $cart_item ){ $custom_items = array(); /* Woo 2.4.2 updates */ if( !empty( $cart_data ) ) { $custom_items = $cart_data; } if( isset( $cart_item['custom_color'] ) ) { $custom_items[] = array( 'name' => $cart_item['custom_color']['label'], 'value' => $cart_item['custom_color']['value'], ); } return $custom_items; } |
Step-4: And in last, when we make an order then we need to save this custom field as order item meta like below:
|
1 2 3 4 5 6 7 |
// Save item custom fields label and value as order item meta data add_action('woocommerce_add_order_item_meta','save_in_order_item_meta', 10, 3 ); function save_in_order_item_meta( $item_id, $values, $cart_item_key ) { if( isset( $values['custom_color'] ) ) { wc_add_order_item_meta( $item_id, $values['custom_color']['label'], $values['custom_color']['value'] ); } } |
By this way, we can add a custom field for each of order item and save it with Woocommerce order. We can see this saved custom field(Color) in WooCommerce Orders page.
I am software developer by profession and doing work and research in field of Computer programmings like PHP, WordPress, Magento, jQuery, Google APIs and many more web languages. Apart from this I write blogs on programming languages like PHP, Javascript, WordPress etc. I am also individual and independent Freelancer so you can hire me for your web work.