{"id":7188,"date":"2020-05-09T07:45:13","date_gmt":"2020-05-09T07:45:13","guid":{"rendered":"https:\/\/expertwebtechnologies.com\/?p=7188"},"modified":"2026-10-06T13:17:43","modified_gmt":"2026-10-06T13:17:43","slug":"woocommerce-add-a-new-checkout-field","status":"publish","type":"post","link":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/","title":{"rendered":"WooCommerce: Add A New Checkout Field."},"content":{"rendered":"\n
\n

We know that checkout page is one of the most important parts of every WooCommerce store.Let\u2019s found out how to add custom fields in WooCommerce checkout.<\/h2>\n

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.
\nAnd 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.<\/p>\n

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.<\/p>\n

As Per Requirements ,to add some extra fields to checkout field and to save them in order meta for future use.
\nIt’s simply done by 4 steps:<\/p>\n

    \n
  1. Add html of new field<\/li>\n
  2. Validate new field<\/li>\n
  3. Save that field value in order meta<\/li>\n
  4. Show Data on order page and emails<\/li>\n<\/ol>\n

    Step 1 : Add html of new field<\/h2>\n

    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.<\/p>\n

    function<\/span> NewCheckoutField<\/span>( $checkout ) { \n  $current_user = wp_get_current_user<\/span>();\n  $saved_license_no = $current_user->license_no;\n  woocommerce_form_field<\/span>('gst_no'<\/span>, array<\/span>(        \n    'type'<\/span> => 'text'<\/span>,        \n    'class'<\/span> => array<\/span>( 'form-row-wide'<\/span>),        \n    'label'<\/span> => 'GST Number'<\/span>,        \n    'placeholder'<\/span> => 'GST Number'<\/span>,        \n    'required'<\/span> => true,        \n  ), $checkout->get_value<\/span>( 'gst_no'<\/span>) ); \n}\nadd_action<\/span>('woocommerce_before_order_notes'<\/span>, 'NewCheckoutField'<\/span> );\n<\/code><\/pre>\n
    Step 2 : Validation<\/h2>\n
    If The added field has validation like required then we can validate and show error using “woocommerce_checkout_process” hook.<\/p>\n
    function<\/span> ValidateCheckoutField<\/span>() {    \n  if ( ! $_POST['gst_no'<\/span>] ) {\n    wc_add_notice<\/span>('Please enter your GST Number'<\/span>,'error' <\/span>);\n  }\n}  \nadd_action<\/span>('woocommerce_checkout_process'<\/span>,'ValidateCheckoutField'<\/span>);\n<\/code><\/pre>\n
    Step 3 : Save Meta Data<\/h2>\n
    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.<\/p>\n
    function<\/span> SaveCheckoutFieldMeta<\/span>( $order_id ) { \n  if ( $_POST['gst_no'<\/span>] ){\n    update_post_meta<\/span>( $order_id,'_gst_no'<\/span>,esc_attr<\/span>( $_POST['gst_no'<\/span>] ) );\n  }\n}\nadd_action<\/span>('woocommerce_checkout_update_order_meta'<\/span>,'SaveCheckoutFieldMeta'<\/span>);\n<\/code><\/pre>\n
    Step 4 : Show Meta Data on Order Page And Emails<\/h2>\n
    function<\/span> ShowGSTField<\/span>( $order ) {    \n  $order_id = $order->get_id<\/span>();\n  if (get_post_meta<\/span>( $order_id,'_gst_no'<\/span>, true ) ) {\n    echo '<p><strong>GST Number:<\/strong> ' . get_post_meta<\/span>( $order_id,'_gst_no'<\/span>, true ) . '<\/p>';\n &nbsp}\n}\nadd_action<\/span>('woocommerce_admin_order_data_after_billing_address'<\/span>,'ShowGSTField'<\/span>, 99<\/span>, 1<\/span> );\n \nfunction<\/span> SaveCheckoutFieldMetaOnEmail<\/span>( $order, $sent_to_admin, $plain_text, $email ) {\n  if ( get_post_meta<\/span>( $order->get_id<\/span>(),'_gst_no'<\/span>, true ) ){\n    echo '<p><strong>GST Number:<\/strong> ' . get_post_meta<\/span>( $order->get_id<\/span>(),'_gst_no'<\/span>, true ) . '<\/p>';\n  }\n}\nadd_action<\/span>('woocommerce_email_after_order_table'<\/span>,'SaveCheckoutFieldMetaOnEmail'<\/span>, 99<\/span>, 4<\/span> );\n<\/code><\/pre>\n
    \"null\"<\/figure>
    <\/p>\n
    Enjoy<\/p>\n<\/div>\n
    Related reading:<\/strong><\/p>\n