{"id":7188,"date":"2020-05-09T07:45:13","date_gmt":"2020-05-09T07:45:13","guid":{"rendered":"https:\/\/expertwebtechnologies.com\/?p=7188"},"modified":"2025-01-07T13:36:35","modified_gmt":"2025-01-07T13:36:35","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

WooCommerce: Add A New Checkout Field.<\/h1>\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.<\/h3>\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<\/h3>\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<\/h3>\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<\/h3>\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<\/h3>\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","protected":false},"excerpt":{"rendered":"
    WooCommerce: Add A New Checkout Field. 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. WooCommerce checkout page is the most important page for both seller and customer. Customers have to provide important information like addresses, billing details, […]<\/p>\n","protected":false},"author":1,"featured_media":8674,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,35,36],"tags":[],"class_list":["post-7188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","category-woocommerce-hooks","category-wordpress"],"yoast_head":"\nWooCommerce: Add A New Checkout Field. - EoXys IT<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce: Add A New Checkout Field. - EoXys IT\" \/>\n<meta property=\"og:description\" content=\"WooCommerce: Add A New Checkout Field. 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. WooCommerce checkout page is the most important page for both seller and customer. Customers have to provide important information like addresses, billing details, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/\" \/>\n<meta property=\"og:site_name\" content=\"EoXys IT\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-09T07:45:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-07T13:36:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"430\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shiv kumawat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shiv kumawat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/\"},\"author\":{\"name\":\"Shiv kumawat\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/534245eb0e092114ff5b6d0d877af61e\"},\"headline\":\"WooCommerce: Add A New Checkout Field.\",\"datePublished\":\"2020-05-09T07:45:13+00:00\",\"dateModified\":\"2025-01-07T13:36:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/\"},\"wordCount\":274,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\",\"articleSection\":[\"Woocommerce\",\"Woocommerce Hooks\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/\",\"url\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/\",\"name\":\"WooCommerce: Add A New Checkout Field. - EoXys IT\",\"isPartOf\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\",\"datePublished\":\"2020-05-09T07:45:13+00:00\",\"dateModified\":\"2025-01-07T13:36:35+00:00\",\"author\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/534245eb0e092114ff5b6d0d877af61e\"},\"breadcrumb\":{\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#primaryimage\",\"url\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\",\"contentUrl\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png\",\"width\":768,\"height\":430,\"caption\":\"Code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eoxysit.com\/blogs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce: Add A New Checkout Field.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/#website\",\"url\":\"https:\/\/eoxysit.com\/blogs\/\",\"name\":\"EoXys IT\",\"description\":\"Digitise your business\",\"alternateName\":\"Eoxys It\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eoxysit.com\/blogs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/534245eb0e092114ff5b6d0d877af61e\",\"name\":\"Shiv kumawat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2025\/03\/CEO-150x150.png\",\"contentUrl\":\"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2025\/03\/CEO-150x150.png\",\"caption\":\"Shiv kumawat\"},\"description\":\"\\\"Shiv kumawat is the Executive Director and CEO of Eoxys It Solution LLP and the strategic mind behind the company\\\"s growth. His expertise in operational efficiency and team leadership empowers his colleagues to excel and innovate.\u201d\",\"sameAs\":[\"https:\/\/eoxysit.com\/\"],\"url\":\"https:\/\/eoxysit.com\/blogs\/author\/shivkumawat1985\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WooCommerce: Add A New Checkout Field. - EoXys IT","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/","og_locale":"en_US","og_type":"article","og_title":"WooCommerce: Add A New Checkout Field. - EoXys IT","og_description":"WooCommerce: Add A New Checkout Field. 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. WooCommerce checkout page is the most important page for both seller and customer. Customers have to provide important information like addresses, billing details, […]","og_url":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/","og_site_name":"EoXys IT","article_published_time":"2020-05-09T07:45:13+00:00","article_modified_time":"2025-01-07T13:36:35+00:00","og_image":[{"width":768,"height":430,"url":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","type":"image\/png"}],"author":"Shiv kumawat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Shiv kumawat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#article","isPartOf":{"@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/"},"author":{"name":"Shiv kumawat","@id":"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/534245eb0e092114ff5b6d0d877af61e"},"headline":"WooCommerce: Add A New Checkout Field.","datePublished":"2020-05-09T07:45:13+00:00","dateModified":"2025-01-07T13:36:35+00:00","mainEntityOfPage":{"@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/"},"wordCount":274,"commentCount":0,"image":{"@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#primaryimage"},"thumbnailUrl":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","articleSection":["Woocommerce","Woocommerce Hooks","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/","url":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/","name":"WooCommerce: Add A New Checkout Field. - EoXys IT","isPartOf":{"@id":"https:\/\/eoxysit.com\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#primaryimage"},"image":{"@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#primaryimage"},"thumbnailUrl":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","datePublished":"2020-05-09T07:45:13+00:00","dateModified":"2025-01-07T13:36:35+00:00","author":{"@id":"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/534245eb0e092114ff5b6d0d877af61e"},"breadcrumb":{"@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#primaryimage","url":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","contentUrl":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2021\/06\/woocommerce-products-custom-fields.png","width":768,"height":430,"caption":"Code"},{"@type":"BreadcrumbList","@id":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-a-new-checkout-field\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eoxysit.com\/blogs\/"},{"@type":"ListItem","position":2,"name":"WooCommerce: Add A New Checkout Field."}]},{"@type":"WebSite","@id":"https:\/\/eoxysit.com\/blogs\/#website","url":"https:\/\/eoxysit.com\/blogs\/","name":"EoXys IT","description":"Digitise your business","alternateName":"Eoxys It","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eoxysit.com\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/534245eb0e092114ff5b6d0d877af61e","name":"Shiv kumawat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eoxysit.com\/blogs\/#\/schema\/person\/image\/","url":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2025\/03\/CEO-150x150.png","contentUrl":"https:\/\/eoxysit.com\/blogs\/wp-content\/uploads\/2025\/03\/CEO-150x150.png","caption":"Shiv kumawat"},"description":"\"Shiv kumawat is the Executive Director and CEO of Eoxys It Solution LLP and the strategic mind behind the company\"s growth. His expertise in operational efficiency and team leadership empowers his colleagues to excel and innovate.\u201d","sameAs":["https:\/\/eoxysit.com\/"],"url":"https:\/\/eoxysit.com\/blogs\/author\/shivkumawat1985\/"}]}},"_links":{"self":[{"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/posts\/7188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/comments?post=7188"}],"version-history":[{"count":0,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/posts\/7188\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/media\/8674"}],"wp:attachment":[{"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/media?parent=7188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/categories?post=7188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eoxysit.com\/blogs\/wp-json\/wp\/v2\/tags?post=7188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}