Skip to content
Woo Product Table
Woo Product Table

Woo Product Table

Revolution of WooCommerce

  • Home
  • Demos
  • Doc
    • Documentation
    • Video Tutorial
    • Plugin API
    • API – Filter & Action
  • Products
    • Min Max Quantity & Step Control
    • UltraAddons Elementor Lite
    • Post Classified for making Documentation
    • Add to Cart Text Changer
    • Astha WordPress Theme
  • Pricing
  • Support
  • Blog
  • Contact Us
GET PRODUCT TABLE

How to add a custom field to the WooCommerce checkout page programmatically?

  • Home
  • Blog
  • How to add a custom field to the WooCommerce checkout page programmatically?
add a custom field to the WooCommerce checkout page programmatically
BlogBy Jakir Hossain

WordPress is a great platform for building websites. However, one advantage it has over other platforms is that we can add WooCommerce CHECKOUT PAGE extra custom fields. This means that we can easily add features to our websites that other platforms don’t offer. For example, we can add fields for shipping information, taxes, and more. Once the custom field is added, users can input information such as shipping addresses, contact information, and more.So, how tiadd custom field on WooCommerce checkout page programmatically

Adding a custom field to the WooCommerce checkout page can be done programmatically by adding a code snippet to your theme or plugin. Custom fields are a great way to personalize your checkout page and make it more user-friendly. This allows for quick and easy customization of the checkout process.

Table of Contents

  • How to add a custom field to the WooCommerce checkout page programmatically?
  • What is checkout page?
  • Adding a Custom Field:
  • Step 1: Create a Custom Field
  • Step 2: Validation
  • Step 3: Updating Data
  • Step 1: Create a Custom Field Customer License Number
  • Step 2: Validate Customer License Number Field
  • Step 3: Save & Show Customer License Number Field Data
  • Conclusion

How to add a custom field to the WooCommerce checkout page programmatically?

Custom fields are a great way to add extra information to your WooCommerce checkout page programmatically. They allow you to easily add any type of data you need, without having to use the WordPress Custom Fields plugin. This guide will show you how to add a custom field to the WooCommerce checkout page programmatically.
First, we have to know about the Woocommerce Checkout Page.

What is checkout page?

There are two different methods that will help you add custom fields to your checkout page. They are

  • Custom coding: for people who know how to code or have some coding knowledge and experience.
  • Plugin: It is primarily intended for non-programmers.
Related Post

Integrate Add to Cart Validation in WooCommerce

Here we are talking about coding methods.

There are many types of hooks available on the checkout page, which give you total control and freedom to place the field where you want. Some of them include.

Position on checkout pageHook name
Before Billing fieldswoocommerce_before_checkout_billing_form
After Shipping fieldswoocommerce_after_checkout_shipping_form
Before Shipping fieldswoocommerce_before_checkout_shipping_form
Before Customer Detailswoocommerce_checkout_before_customer_details
After Customer Detailswoocommerce_checkout_after_customer_details

An array of properties:

type – field type (text, textarea, password, select).

label—label for the input field

placeholder – This is a placeholder for the input.

class – the input class

required – true or false, whether or not the field is required.

clear – true or false, it applies a clear fix to the field/label.

label_class – The label element's class.

options – an array of options (keys => value pairs) for select boxes.

You have to write down all the code in your functions.php file.

Adding a Custom Field:

Let’s add a new field to checkout Page. follow all the steps.

Step 1: Create a Custom Field

Custom field named "My Field"

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
    echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';
    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Fill in this field'),
        'placeholder'   => __('Enter something'),
        ), $checkout->get_value( 'my_field_name' ));
    echo '</div>';
}

When you scroll down your checkout page, you will find this at the bottom of the page.

your checkout page

Step 2: Validation

For the validation custom field when the checkout form is posted. We have to add this validation code:

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
/**
 * Process the checkout
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}

Step 3: Updating Data

When a customer tries to save data in a customer field, he or she cannot do it. In that case, you have to add this code for updating data.

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );
function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_name'] ) ) {
        update_post_meta( $order_id, 'My Field', sanitize_text_field( $_POST['my_field_name'] ) );
    }
}

This way, you can easily add a custom field on the checkout page. Now I am giving you another example of it with code.

Step 1: Create a Custom Field Customer License Number

Field ID is “license_no“.

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

Step 2: Validate Customer License Number Field

When checkout is processed, you want to make sure that your custom field is not empty. So, we have to choose "required" => true, which means helping the field will have a required mark beside its label. Also, you can generate an error message if your custom field is empty.

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

Step 3: Save & Show Customer License Number Field Data

After validation is passed, WooCommerce processes this order. But we cannot get new field value data and it gets lost as there is no function that can store this data in sql. We need to save and also display this field value. Also, we need to save it on inside orders and order emails.

add_action( 'woocommerce_checkout_update_order_meta', 'bbloomer_save_new_checkout_field' );
  	
function bbloomer_save_new_checkout_field( $order_id ) { 
    if ( $_POST['license_no'] ) update_post_meta( $order_id, '_license_no', esc_attr( $_POST['license_no'] ) );
}
  
add_action( 'woocommerce_admin_order_data_after_billing_address', 'bbloomer_show_new_checkout_field_order', 10, 1 );
   
function bbloomer_show_new_checkout_field_order( $order ) {    
   $order_id = $order->get_id();
   if ( get_post_meta( $order_id, '_license_no', true ) ) echo '<p><strong>License Number:</strong> ' . get_post_meta( $order_id, '_license_no', true ) . '</p>';
}
 
add_action( 'woocommerce_email_after_order_table', 'bbloomer_show_new_checkout_field_emails', 20, 4 );
  
function bbloomer_show_new_checkout_field_emails( $order, $sent_to_admin, $plain_text, $email ) {
    if ( get_post_meta( $order->get_id(), '_license_no', true ) ) echo '<p><strong>License Number:</strong> ' . get_post_meta( $order->get_id(), '_license_no', true ) . '</p>';
}
Show Customer License Number Field Data

Conclusion

In conclusion, by following the steps in this article, you can add a custom field to the WooCommerce checkout page programmatically. This can be a great way to collect extra information from your customers, or to ask them to agree to your terms and conditions before completing their purchase. This can be helpful for collecting additional information from your customers, such as their phone number or email address.

add a custom field checkout page programmatically woocommerce

Share

Post navigation

Previous: WordPress or Shopify which is better?
Next: Can WooCommerce Handle High Traffic?
Code Astrology New Logo-07

Subscribe to our Newsletter

Resource
  • Affiliate Program
  • Affiliate Area
  • Video Tutorial
  • Blog & News
  • Supports
  • FAQ
Company
  • Our Service
  • Get Quote
  • Refund Policy
  • Support Policy
  • Privacy Policy
  • Terms of Service
Our Products
  • Product Table for WooCommerce
  • Min Max Quantity & Step Control
  • UltraAddons Elementor Lite
  • Quantity Plus Minus Button
  • Post Classified for making Documentation
  • Add to Cart Text Changer
  • Astha WordPress Theme
Facebook-f Twitter Linkedin Instagram Youtube
© 2022, Product Table from CodeAstrology. All Rights Reserved
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT