Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Add Additional Custom Fields into WooCommerce Checkout Page

March 28, 2019

6 Min Read
Adding-Custom-fields-in-WooCommerce
Reading Time: 6 minutes

There will be times when you really need to add WooCommerce custom checkout fields on a checkout page according to your requirements and this can be a real hefty job. So, we made up a tutorial to get you going. This tutorial exactly helps you to perceive the way to add a custom field to a checkout page.

There are many alternatives to modify your checkout pages: third-party plugins, WooCommerce extensions, custom development. Let’s take a look at the options available to optimize your checkout.

Best WooCommerce Hosting On Fastest Managed Cloud Servers

A WooCommerce custom checkout field is important in assembling to get further data from the purchasers before they complete an order. I have also explained how you dynamically customize additional fields such as removing the billing address, add/edit custom checkout fields and save these custom fields to the database in WooCommerce Custom Checkout Fields: Edit, Delete Fields and Email.

Now, let’s get going with the tutorial.

To add a custom field to the checkout page. Follow this completely different approach, such as:

  • Using Plugin
  • Coding

By Using WooCommerce Checkout Manager Plugin:

Download this WooCommerce Checkout Manager plugin and install it.

Then, Go to “Admin Panel >WooCheckout“.

The result can show a listing of all the fields from the billing page to the cart page. Scroll through the page and all the way down to the bottom.

Now find “Add New Field Section” as shown below.

WooCommerce Checkout Add Fields

Fill out the values and hit “Save Changes” button on the top right corner.

Now if you go to the Checkout page, you will see the new field:

WooCommerce Check Out Field

Through Coding

This method adds the custom field to the checkout page using the code given. To start out with coding, we are ought to do the subsequent steps declared below.

First, we need to perform an action to our functions.php file, then we will use this code to start customizing the checkout page:

<?php
/**
 * Add the field to the checkout page
 */
add_action('woocommerce_after_order_notes', 'customise_checkout_field');

function customise_checkout_field($checkout)
{
	echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';
	woocommerce_form_field('customised_field_name', array(
		'type' => 'text',
		'class' => array(
			'my-field-class form-row-wide'
		) ,
		'label' => __('Customise Additional Field') ,
		'placeholder' => __('Guidence') ,
		'required' => true,
	) , $checkout->get_value('customised_field_name'));
	echo '</div>';
}

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

WooCommerce Check Out Page

For data validation of the custom field using the code given below:

<?php
/**
 * Checkout Process
 */

add_action('woocommerce_checkout_process', 'customise_checkout_field_process');

function customise_checkout_field_process()
{
	// if the field is set, if not then show an error message.
	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:

<?php
/**
 * Update value of field
 */

add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');

function customise_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 this, we have added custom fields to our WooCommerce web store.

You could also edit WooCommerce checkout fields using the WooCommerce Custom Checkout Fields Editor plugin.

Customizing Shipping Form In WooCommerce Checkout Page

Since checkout page often doubles as data collection resource, many store owners often want to customize the checkout page and add custom fields to their WooCommerce checkout page. This usually involves adding and/or removing fields from the page.

To customize the checkout fields, WooCommerce offers several filters that deal with major groups of fields on the page. In particular, these filters include woocommerce_checkout_fields (for checkout fields), woocommerce_billing_fields (for billing related fields), and woocommerce_shipping_fields (for shipping related fields). Now since this tutorial deals with the checkout fields, I will mainly work with woocommerce_checkout_fields filter.

The good news is this: It is exceptionally easy to customize the WooCommerce checkout page to ensure that the page fulfils its purpose. In this short tutorial, I will cover both the addition and removal fields.

Remove Fields From the WooCommerce Checkout Page

Let’s start with the following screenshot of the checkout page;

WooCommerce Checkout Page Address

For the purpose of his example, I will demonstrate how to remove the First name and the Last name fields.

Here’s the code snippet:

add_filter( 'woocommerce_checkout_fields' , 'custom_fields_woocommerce' );
 
function custom_fields_woocommerce( $fields ) {
    unset($fields['shipping']['shipping_first_name']);
    unset($fields['shipping']['shipping_last_name']);

    return $fields;
}

In the above code snippet, you can see the function custom_fields_woocommerce. this function takes the argument $fields that take the checkout fields that need to be removed or “unset”. In the snippet, I have unset the first name and the last name.

Here is how the checkout will look after this snippet:

Custom Fields WooCommerce Checkout Page

Add Fields to the WooCommerce Checkout Page

Similar to removing fields, adding fields to the WooCommerce checkout page is a simple matter. For this, add the following code snippet:

add_filter( 'woocommerce_checkout_fields' , 'woocommerce_checkout_field_editor' );

// Our hooked in function - $fields is passed via the filter!
function woocommerce_checkout_field_editor( $fields ) {
    $fields['shipping']['shipping_field_value'] = array(
        'label'     => __('Field Value', 'woocommerce'),
        'placeholder'   => _x('Field Value', 'placeholder', 'woocommerce'),
        'required'  => true
    );

    return $fields;
}

The above code snippet contains both label and placeholder for the new fields. Now, there are requirements to set some fields mandatory. This is taken care of by the required argument that is set to TRUE. this will cause a red asterisk to appear at the end of the field’s name.

WooCommerce Checkout Page Field Value

If the required argument is set to FALSE, the field will be set to OPTIONAL:

Edit WooCommerce Checkout Page Field

Display Field Value at the WooCommerce Order Page

The following code snippet displays the value of the field in the order page. For this, use the following code snippet:

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'edit_woocommerce_checkout_page', 10, 1 );

function edit_woocommerce_checkout_page($order){
    global $post_id;
    $order = new WC_Order( $post_id );
    echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}

This code snippet will display the field in the WooCommerce order page.

Display WooCommerce Checkout Field Value

WooCommerce checkout is a very functional page that asks for the essential information and then helps the visitor go through the sale. Since this page is designed to be fast and hassle-free, the fields on the page are very basic.

In many cases, WooCommerce stores owners often use the checkout page as an alternate customer data collection location. Combined with the landing pages and other data collection tactics, this allows store owners access to very high-quality customer data.

As you can see customizing WooCommerce checkout page is a great way of streamlining the user experience for the visitors. Adding or removing fields from the checkout page is an easy matter of adding code snippets. If you need help with the process, do drop a comment and I will get back to you

Q. How do I enable shipping address in WooCommerce?

Go to WooCommerce> settings > shipping > add shipping zone. You can add multiple shipping methods within this zone. Only customers within the zone will see them.

Q. How do I turn off shipping in WooCommerce?

Go to WooCommerce> settings > shipping > Select your shipping zone. Next click on it. Under the shipping zone you can see the enable/disable option available.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!