How to add extra field to Woo Commerce Checkout

Share This Post

What is Checkout Page?

Checkout page is an eCommerce term that refers to a page shown to a customer during the step-by-step checkout process. Generally, it is the most important page for both seller and customer. Customers have to provide important pieces of information like billing details, payment method on this page. And if somehow 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.

Add extra field to Woo Checkout page

Sometimes we barely need to add  WooCommerce custom fields on a checkout page according to our requirements and this can be a real hefty job. Today I am going to guide you through on how to do this. After reading this blog you will be ready to add a custom field to the checkout page. Let’s get going to the point.

Imagine that this is your default checkout page. We are using Dokan theme (by weDevs) here as an example.

There is two completely different approach that will help you in adding custom fields to checkout page such as:

  • Coding (For coders)
  • Plugin (For non-coders)

Through Coding

For the people who know how to code or who has basic coding knowledge can follow this approach. This method adds the custom field to the checkout page using the code given below. To start out with coding, we are ought to do the subsequent steps given below.

First, we need to perform an action to our functions.php file. Copy this entire code to your theme’s function.php file.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

 

    /**

    * Add custom field to the checkout page

    */

    add_action(‘woocommerce_after_order_notes’, ‘custom_checkout_field’);

    function custom_checkout_field($checkout)

    {

        echo ‘<div id=”custom_checkout_field”><h2>’ . __(‘New Heading’) . ‘</h2>’;

        woocommerce_form_field(‘custom_field_name’, array(

            ‘type’ => ‘text’,

            ‘class’ => array(

                ‘my-field-class form-row-wide’

            ) ,

            ‘label’ => __(‘Custom Additional Field’) ,

            ‘placeholder’ => __(‘New Custom Field’) ,

          ) ,

          $checkout->get_value(‘custom_field_name’));

          echo ‘</div>’;

     }

 

After adding this code, the checkout page should appear as :

For data validation of the custom field you can use the code given below:

1

2

3

4

5

6

7

8

9      

/**

* Checkout Process

*/

add_action(‘woocommerce_checkout_process’, ‘customised_checkout_field_process’);

function customised_checkout_field_process()

{

// Show an error message if the field is not set.

if (!$_POST[‘customised_field_name’]) wc_add_notice(__(‘Please enter value!’) , ‘error’);

}

Now that we’ve added a replacement field to the checkout page along with the validation check, we would like to confirm that the details entered into the custom field by the client, is being saved or not.

This can be done by using the code below:

1

2

3

4

5

6

7

8

9

10

11         

/**

* Update the value given in custom field

*/

add_action(‘woocommerce_checkout_update_order_meta’, ‘custom_checkout_field_update_order_meta’);

function custom_checkout_field_update_order_meta($order_id)

{

if (!empty($_POST[‘customised_field_name’])) {

update_post_meta($order_id, ‘Some Field’, sanitize_text_field($_POST[‘customised_field_name’]));

}

}

With these lines, we have added  custom fields to our WooCommerce web store!

For non-coders

Non-coders can use a plugin to add a new field to the checkout page. There are many plugins that can be used for this purpose. Some are as follows-

WooCommerce Checkout Manager

WooCommerce Checkout Pro (Manager)

Checkout Filed Editor

By using these plugins anyone with zero coding knowledge can add extra custom fields to the WooCommerce checkout page. Let’s see how to add field with WooCommerce Checkout Manager-

Navigate to- Dashboard -> WooCheckoout -> Additional

Now click on “+Add New Field”

Set position, label, placeholder, type & other fields. Then hit “Save Changes”

Now you’ll see that this field is added to the checkout page successfully!


So from now on you know how to add an extra field and it’s not too hard, is it?
Now, whatever the reason is like- a mandatory client request or your own needs, you are ready to customize checkout page!

Liked what you read?

Subscribe & Get Email on Latest blog posts and offers!

Just want discount? Click & Subscribe here!

One comment

Leave a Reply

More to Explore

Core WordPress

Reasons Why WordPress is the Best CMS for SEO

Nearly two decades since its initial roll-out, WordPress evolved from a simple platform for bloggers into a household name in website development. In 2021, 455

email design with Elementor
Elementor Add-on

Design WordPress emails without writing code

WordPress is an amazing platform for creating a personal blog to even business sites. Millions of sites run on WordPress throughout the internet now. Throughout

voidCoders

Hey! we got few news for you!!

Build your emails with Elementor!

Elementor Pro user?
20% Discount on Ele Query Builder

What can query builder do?