How to add extra field to Woo Commerce checkout and display in edit order page

Question

I added three fields extra to my WooCommerce checkout (CVR nummer, reference nummer and ønsket leveringsdato). They show up correctly in the checkout but once the order is placed, the information is not sent to the WooCommerce backend/order overview. How do I send over the information so we receive it?

    function add_woocommerce_billing_fields($billing_fields){

    //reorder woo my billing address form fields
    $billing_fields2['billing_first_name'] = $billing_fields['billing_first_name'];
    $billing_fields2['billing_last_name']  = $billing_fields['billing_last_name'];

    $billing_fields2['billing_vat'] = array(
        'type' => 'text',
        'label' =>  __('CVR nummer',  'keyelp-shop-customization' ),
        'class' => array('form-row-wide'),
        'required' => true,
        'clear' => true
    );

    $billing_fields2['billing_ref'] = array(
        'type' => 'text',
        'label' =>  __('Reference nummer',  'keyelp-shop-customization' ),
        'class' => array('form-row-wide'),
        'required' => false,
        'clear' => true
    );

    $billing_fields2['billing_date'] = array(
        'type' => 'text',
        'label' =>  __('Ønsket leveringsdato',  'keyelp-shop-customization' ),
        'class' => array('form-row-wide'),
        'required' => false,
        'clear' => true
    );
        
    $merged_billing_fields = $billing_fields2 + $billing_fields;

    return $merged_billing_fields;

}

Answer 1

You can use woocommerce_checkout_update_order_meta and woocommerce_admin_order_data_after_billing_address action hook. code goes in your ative theme functions.php file.

Using woocommerce_checkout_update_order_meta hook you can save value meta.

function custom_checkout_field_update_order_meta( $order_id ) {
    if ( $_POST['billing_vat'] ){ 
        update_post_meta( $order_id, 'billing_vat', esc_attr($_POST['billing_vat']) );
    }
    if ( $_POST['billing_ref'] ){ 
        update_post_meta( $order_id, 'billing_ref', esc_attr($_POST['billing_ref']) );
    }
    if ( $_POST['billing_date'] ){ 
        update_post_meta( $order_id, 'billing_date', esc_attr($_POST['billing_date']) );
    }
}
add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

Using woocommerce_admin_order_data_after_billing_address hook you can display meta value after billing address.

function custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('CVR nummer').':</strong> ' . get_post_meta( $order->get_id(), 'billing_vat', true ) . '</p>';
    echo '<p><strong>'.__('Reference nummer').':</strong> ' . get_post_meta( $order->get_id(), 'billing_ref', true ) . '</p>';
    echo '<p><strong>'.__('Ønsket leveringsdato').':</strong> ' . get_post_meta( $order->get_id(), 'billing_date', true ) . '</p>';
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_checkout_field_display_admin_order_meta', 10, 1 );