{"id":4271,"date":"2024-07-03T17:15:23","date_gmt":"2024-07-03T17:15:23","guid":{"rendered":"https:\/\/scriptfeeds.com\/blog\/?p=4271"},"modified":"2024-07-03T18:18:11","modified_gmt":"2024-07-03T18:18:11","slug":"custom-checkout-field-woocommerce","status":"publish","type":"post","link":"https:\/\/scriptfeeds.com\/blog\/wordpress\/custom-checkout-field-woocommerce\/","title":{"rendered":"3 Steps to Add a extra Custom Checkout Field in WooCommerce"},"content":{"rendered":"\n<p>Let\u2019s say you want to custom checkout field on <strong><a href=\"https:\/\/scriptfeeds.com\/blog\/category\/wordpress\/woocommerce\/\" data-type=\"link\" data-id=\"https:\/\/scriptfeeds.com\/blog\/category\/wordpress\/woocommerce\/\">WooCommerce <\/a><\/strong>checkout page without Plugin, to capture few extra details from your customer.  For example, it might be a customer VAT number or a Company Name. In such cases there are many plugins available but problems with plugins are compatibility and Speed. So this blog help you to add custom checkout field using three step codes without any extra files or heavy css of separate plugins.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#where-to-add-custom-checkout-field-custom-code\">Where to add Custom Checkout Field custom code?<\/a><\/li><li><a href=\"#step-1-php-snippet-add-new-custom-checkout-field-woo-commerce-page\">Step 1 : PHP Snippet : Add New Custom checkout Field @ WooCommerce Page<\/a><\/li><li><a href=\"#step-2-validation-of-custom-field\">Step 2 : Validation of Custom Field<\/a><\/li><li><a href=\"#step-3-saving-and-display-of-custom-field-at-woo-commerce-thank-you-page-order-page-emails\">Step 3 : Saving and Display of Custom field at WooCommerce Thank You Page, Order Page &amp; Emails<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Custom checkout fields which we creating using codes will show above the Checkout page order notes \u2013 right after the shipping form. It will feature a label, an input field and will be required, just like other fields of checkout page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"847\" height=\"550\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/07\/default-customer-checkout-page-woocommerce-847x550.png\" alt=\"Custom Checkout Field\" class=\"wp-image-4281\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/07\/default-customer-checkout-page-woocommerce-847x550.png 847w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/07\/default-customer-checkout-page-woocommerce-248x161.png 248w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/07\/default-customer-checkout-page-woocommerce-125x81.png 125w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/07\/default-customer-checkout-page-woocommerce-768x498.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/07\/default-customer-checkout-page-woocommerce-750x487.png 750w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/07\/default-customer-checkout-page-woocommerce-1140x740.png 1140w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/07\/default-customer-checkout-page-woocommerce.png 1225w\" sizes=\"(max-width: 847px) 100vw, 847px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"where-to-add-custom-checkout-field-custom-code\"><strong>Where to add Custom Checkout Field<\/strong> <strong>custom code?<\/strong><\/h2>\n\n\n\n<p>You should place custom PHP code in&nbsp;<em><a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/theme-functions\/\" target=\"_blank\" rel=\"noopener\">functions.php<\/a><\/em>&nbsp;and custom CSS in&nbsp;<em>style.css<\/em>&nbsp;of your child theme<\/p>\n\n\n\n<p>So, here\u2019s step by step guide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"step-1-php-snippet-add-new-custom-checkout-field-woo-commerce-page\"><strong>Step 1 : PHP Snippet : Add New Custom checkout Field @ WooCommerce Page<\/strong><\/h2>\n\n\n\n<p>Here we display the new VAT field on the WooCommerce Checkout page above the \u201cOrder Notes\u201d box<\/p>\n\n\n\n<p>The new field ID is \u201c<strong>TAX_no<\/strong>\u201c, which will be useful to remember in Step 2 and 3.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * @snippet       Add Custom Field @ WooCommerce Checkout Page\n * @author        Scriptfeeds\n * @testedwith    WooCommerce 6.6\n * @community     https:\/\/scriptfeeds.com\/\n *\/\n  \nadd_action( 'woocommerce_before_order_notes', 'script_add_custom_checkout_field' );\n  \nfunction script_add_custom_checkout_field( $checkout ) { \n   $current_user = wp_get_current_user();\n   $saved_tax_no = $current_user-&gt;tax_no;\n   woocommerce_form_field( 'tax_no', array(        \n      'type' =&gt; 'text',        \n      'class' =&gt; array( 'form-row-wide' ),        \n      'label' =&gt; 'BTW Number',        \n      'placeholder' =&gt; 'CA12345678',        \n      'required' =&gt; true,        \n      'default' =&gt; $saved_tax_no,        \n   ), $checkout-&gt;get_value( 'tax_no' ) ); \n}\n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"step-2-validation-of-custom-field\"><strong>Step 2 : Validation of Custom Field<\/strong><\/h2>\n\n\n\n<p>To validate the fields, we will use <em>\u201crequired\u201d =&gt; true<\/em>&nbsp;which means the field will have a required mark beside its label. But we also have to generate error message in case of empty field.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * @snippet       validating Custom Field\n * @author        Scriptfeeds\n * @testedwith    WooCommerce 6.6\n * @community     <a href=\"https:\/\/scriptfeeds.com\/\">https:\/\/scriptfeeds.com<\/a>\n *\/\n \nadd_action( 'woocommerce_checkout_process', 'script_validate_new_checkout_field' );\n  \nfunction script_validate_new_checkout_field() {    \n   if ( ! $_POST&#91;'tax_no'] ) {\n      wc_add_notice( 'Please enter your TAX Number', 'error' );\n   }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"step-3-saving-and-display-of-custom-field-at-woo-commerce-thank-you-page-order-page-emails\"><strong>Step 3 : Saving and Display of Custom field at WooCommerce Thank You Page, Order Page &amp; Emails<\/strong><\/h2>\n\n\n\n<p>After custom fields validation, order will be processes in WooCommerce. But to display custom fields value in orders and emails we need a function to display and save. Use below code to do the same.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * @snippet       Display of Custom Field\n * @author        Scriptfeeds\n * @testedwith    WooCommerce 6.6\n * @community     <a href=\"https:\/\/scriptfeeds.com\/\">https:\/\/scriptfeeds.com<\/a>\n *\/\n \nadd_action( 'woocommerce_checkout_update_order_meta', 'script_save_new_checkout_field' );\n  \nfunction script_save_new_checkout_field( $order_id ) { \n    if ( $_POST&#91;'tax_no'] ) update_post_meta( $order_id, '_tax_no', esc_attr( $_POST&#91;'tax_no'] ) );\n}\n \nadd_action( 'woocommerce_thankyou', 'script_show_new_checkout_field_thankyou' );\n   \nfunction script_show_new_checkout_field_thankyou( $order_id ) {    \n   if ( get_post_meta( $order_id, '_tax_no', true ) ) echo '&lt;p&gt;&lt;strong&gt;Tax Number:&lt;\/strong&gt; ' . get_post_meta( $order_id, '_tax_no', true ) . '&lt;\/p&gt;';\n}\n  \nadd_action( 'woocommerce_admin_order_data_after_billing_address', 'script_show_new_checkout_field_order' );\n   \nfunction script_show_new_checkout_field_order( $order ) {    \n   $order_id = $order-&gt;get_id();\n   if ( get_post_meta( $order_id, '_tax_no', true ) ) echo '&lt;p&gt;&lt;strong&gt;Tax Number:&lt;\/strong&gt; ' . get_post_meta( $order_id, '_tax_no', true ) . '&lt;\/p&gt;';\n}\n \nadd_action( 'woocommerce_email_after_order_table', 'script_show_new_checkout_field_emails', 20, 4 );\n  \nfunction script_show_new_checkout_field_emails( $order, $sent_to_admin, $plain_text, $email ) {\n    if ( get_post_meta( $order-&gt;get_id(), '_tax_no', true ) ) echo '&lt;p&gt;&lt;strong&gt;Tax Number:&lt;\/strong&gt; ' . get_post_meta( $order-&gt;get_id(), '_tax_no', true ) . '&lt;\/p&gt;';\n}<\/code><\/pre>\n\n\n\n<p>So that&#8217;s all you need to do to add Custom field on WooCommerce checkout Page without any Plugin. We tested it with latest version of WooCommerce. Please give a try and let us know how it goes.<\/p>\n\n\n\n<p><strong><em>For anything else, connect with our team.<\/em><\/strong> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s say you want to custom checkout field on WooCommerce checkout page without Plugin, to capture few extra details from your customer. For example, it might be a customer VAT number or a Company Name. In such cases there are many plugins available but problems with plugins are compatibility and Speed. So this blog help [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3306,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"subtitle":"","format":"standard","video":"","gallery":"","source_name":"","source_url":"","via_name":"","via_url":"","override_template":"0","override":[{"template":"2","single_blog_custom":"","parallax":"1","fullscreen":"1","layout":"right-sidebar-narrow","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"float","share_float_style":"share-monocrhome","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","show_post_reading_time":"0","post_reading_time_wpm":"300","show_zoom_button":"0","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","show_prev_next_post":"0","show_popup_post":"0","number_popup_post":"1","show_author_box":"0","show_post_related":"1","show_inline_post_related":"0"}],"override_image_size":"0","image_override":[{"single_post_thumbnail_size":"no-crop","single_post_gallery_size":"crop-500"}],"trending_post":"0","trending_post_position":"meta","trending_post_label":"Trending","sponsored_post":"0","sponsored_post_label":"Sponsored by","sponsored_post_name":"","sponsored_post_url":"","sponsored_post_logo_enable":"0","sponsored_post_logo":"","sponsored_post_desc":"","disable_ad":"0"},"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[86,75],"tags":[421,422],"class_list":["post-4271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","category-wordpress","tag-custom-checkout-fields","tag-custom-fields-without-plugin"],"_links":{"self":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/4271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/comments?post=4271"}],"version-history":[{"count":0,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/4271\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media\/3306"}],"wp:attachment":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media?parent=4271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/categories?post=4271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/tags?post=4271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}