Save and show a custom field as Order item meta data – Woocommerce

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

// 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:

// 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:

// 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:

// 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.