Add custom field in the WooCommerce checkout page

In this article we will use multiple WooCommerce hooks to add a new custom field in the checkout page, then validate this field and finally save this field into order meta. We will use vat_code as the field key and VAT Code as the field label in this example, you can replace these values according to your requirements.

Add a custom field in the WooCommerce checkout page 

For this, we are going to use the woocommerce_after_checkout_billing_form  Woocommerce hook, it will add this new custom field after the billing form. You can use different checkout page hooks to add this field to another location on the checkout page.

//Add custom field in checkout page
add_filter( 'woocommerce_after_checkout_billing_form', 'rp_add_custom_field_checkout_page', 10, 2 );
function rp_add_custom_field_checkout_page($checkout){
    woocommerce_form_field( 'vat_code', array(
        'type'        => 'text',
        'required'    => true,
        'label'       => 'VAT Code',
    ), $checkout->get_value( 'vat_code' ) );
}

Validate newly added custom field

This is an optional step, we can skip this part if the new field is optional and doesn’t need any validations. If this field is a required field then we must validate this field. In this example, we are going to add a basic required field validation but you can change it to a more advanced validation like numbers only, special pattern, length restriction, etc.

//Validate newly added custom field in checkout page
add_action( 'woocommerce_checkout_process', 'rp_validate_custom_field_checkout_page' );
function rp_validate_custom_field_checkout_page() {    
   if (isset($_POST['vat_code']) && !$_POST['vat_code'] ) {
      wc_add_notice( 'VAT Code is a required field!', 'error' );
   }
}

Save custom field value in order to meta

Once the field is added and validated, its value needs to be stored in the order meta. This can be done with the help of the woocommerce_checkout_update_order_meta WooCommerce hook.

//Save newly added custom fields in order mea
add_action( 'woocommerce_checkout_update_order_meta', 'rp_save_custom_checkout_fields_order_meta' );
function rp_save_custom_checkout_fields_order_meta( $order_id ) { 
    if ( $_POST['vat_code'] ) update_post_meta( $order_id, 'vat_code', esc_attr( $_POST['vat_code'] ) );
}

Show custom field in edit order page

Finally, we can use the woocommerce_admin_order_data_after_billing_address WooCommerce hook to show the new saved field value in the edit order page in Wp-admin.

//Show custom field in order edit page
add_action( 'woocommerce_admin_order_data_after_billing_address', 'rp_show_custom_field_edit_order_page' );
function rp_show_custom_field_edit_order_page( $order ) {    
   $order_id = $order->get_id();
   if ( get_post_meta( $order_id, 'vat_code', true ) ) echo '<p><strong>VAT Code:</strong> ' . get_post_meta( $order_id, 'vat_code', true ) . '</p>';
}