How to Customize WooCommerce Checkout Page and Add Additional Fields

So, you’re using WooCommerce, but you’ve probably noticed that the default checkout page isn’t always the best at boosting your sales. The good news is you can replace it with a custom one, which can make a world of difference in your conversion rates.

But, hey, we get it – adding custom fields to a WooCommerce checkout page might sound daunting.

That’s why I’ve put together a handy tutorial to walk you through the process. I’ll show you how to add those custom fields to your WooCommerce checkout page step by step.

Now, when it comes to tweaking your WooCommerce checkout pages, you’ve got some choices. You can use third-party WooCommerce extensions or even roll up your sleeves and do some custom coding.

In this article, I’ll explain why it is important to customize WooCommerce checkout page and how to add custom fields to your WooCommerce checkout page using either plugins or your own coding skills.

Why Is WooCommerce Checkout Field Important?

Did you know that the average cart abandonment rate is 69.99%, according to Baymard Institute?

It’s a harsh reality in the world of online shopping.

That’s why you should pull out all the stops to nudge your visitors toward completing a transaction. But here’s the hitch – the default WooCommerce checkout isn’t exactly optimized for high conversions.

The regular WooCommerce checkout page looks like this:

Very basic, right?

Fear not!

To improve your conversion rates, you can swap the default one for a custom WooCommerce checkout page.

For instance, you can add trust-building elements like customer reviews and 5-star ratings. Even if they’re new to your business, this can make potential buyers feel more confident. You can also show off related products that your visitors can buy together.

Here’s an example of a customized WooCommerce checkout page:

The customization possibilities are endless.

Now that you’re excited about customizing your checkout page let me tell you that in this guide, I’ve explained how you can dynamically customize additional fields to remove billing addresses, add or edit custom checkout fields, and save these custom fields to the database.

Customize WooCommerce Checkout Fields via Plugin

• First, download the WooCommerce Checkout Manager plugin and Install and Activate it.
• Then, go to the WordPress Admin Dashboard → WooCommerce → Checkout tab.

• Now go through all the different sub-tabs like Billing, Shipping, Additional, or others in which you wish to add a custom field.
• Click on the Add New Field Section, as shown below.

• Once done, hit the Save Changes button.

Customize WooCommerce Checkout Fields via Coding

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

• First, we need to act as our functions.php file, and 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 follows:

• For data validation of the custom field, use 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 whether the details entered into the custom field by the client are 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 Custom WooCommerce Checkout Fields Editor plugin.

Customize the Shipping Form on the Checkout Page

Since the checkout page often doubles as a 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 WooCommerce checkout fields, WooCommerce offers several filters dealing with major 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).

Since this article deals with the checkout fields, I will mainly work with the woocommerce_checkout_fields filter.

Remove Fields From the WooCommerce Checkout Page

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

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 and last names.

Here is how the checkout will look after this snippet:

Add Fields to the WooCommerce Checkout Page

Similar to removing fields, adding fields to the WooCommerce checkout page is simple. 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 labels and placeholders for the new fields. Now, there are requirements to set some mandatory fields. 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.

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

Display Field Value on the WooCommerce Order Page

The following code snippet displays the field’s value on 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 on the WooCommerce order page.

Summary

In conclusion, when you customize WooCommerce checkout page and add/remove custom fields, you can make the entire purchasing process smooth and efficient for your customers, ensuring you don’t miss out on any sales.

As discussed in this blog, you can show your customers product reviews, related products, five-star ratings, and much more to gently push them toward purchasing.

Many WooCommerce store owners also find the checkout page to be an excellent spot for gathering valuable customer data and utilizing landing pages and other data collection strategies. This approach provides access to high-quality customer information.

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 [email protected]

Get Connected on: Twitter Community Forum