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

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.

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.

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.

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.

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>';
}

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.