WooCommerce: Add A New Checkout Field.

We know that checkout page is one of the most important parts of every WooCommerce store.Let’s found out how to add custom fields in WooCommerce checkout.

WooCommerce checkout page is the most important page for both seller and customer. Customers have to provide important information like addresses, billing details, payment method,order notes etc on this page.
And if this page produces an error, no customer will be able to make any purchase! So we can imagine how important this page is to the sellers.

Many times as per our need we need some more information from users when they are buying a product, like GST number, PAN Number , photo, registration number etc.

As Per Requirements ,to add some extra fields to checkout field and to save them in order meta for future use.
It’s simply done by 4 steps:

1. Add html of new field
2. Validate new field
3. Save that field value in order meta
4. Show Data on order page and emails

Step 1 : Add html of new field

we can add fields on checkout form using “woocommerce_form_field” function. and to show it before order note, we will integrate it in “woocommerce_before_order_notes” hook.

function NewCheckoutField( $checkout ) { 
  $current_user = wp_get_current_user();
  $saved_license_no = $current_user->license_no;
  woocommerce_form_field('gst_no', array(        
    'type' => 'text',        
    'class' => array( 'form-row-wide'),        
    'label' => 'GST Number',        
    'placeholder' => 'GST Number',        
    'required' => true,        
  ), $checkout->get_value( 'gst_no') ); 
}
add_action('woocommerce_before_order_notes', 'NewCheckoutField' );

Step 2 : Validation

If The added field has validation like required then we can validate and show error using “woocommerce_checkout_process” hook.

function ValidateCheckoutField() {    
  if ( ! $_POST['gst_no'] ) {
    wc_add_notice('Please enter your GST Number','error' );
  }
}  
add_action('woocommerce_checkout_process','ValidateCheckoutField');

Step 3 : Save Meta Data

After checkout process we need to save received value to order meta so we can view it on order page and get these data using order id.

function SaveCheckoutFieldMeta( $order_id ) { 
  if ( $_POST['gst_no'] ){
    update_post_meta( $order_id,'_gst_no',esc_attr( $_POST['gst_no'] ) );
  }
}
add_action('woocommerce_checkout_update_order_meta','SaveCheckoutFieldMeta');

Step 4 : Show Meta Data on Order Page And Emails

function ShowGSTField( $order ) {    
  $order_id = $order->get_id();
  if (get_post_meta( $order_id,'_gst_no', true ) ) {
    echo '<p><strong>GST Number:</strong> ' . get_post_meta( $order_id,'_gst_no', true ) . '</p>';
 &nbsp}
}
add_action('woocommerce_admin_order_data_after_billing_address','ShowGSTField', 99, 1 );
 
function SaveCheckoutFieldMetaOnEmail( $order, $sent_to_admin, $plain_text, $email ) {
  if ( get_post_meta( $order->get_id(),'_gst_no', true ) ){
    echo '<p><strong>GST Number:</strong> ' . get_post_meta( $order->get_id(),'_gst_no', true ) . '</p>';
  }
}
add_action('woocommerce_email_after_order_table','SaveCheckoutFieldMetaOnEmail', 99, 4 );

Enjoy