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 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 step-by-step how to add those custom fields to your WooCommerce checkout page.

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 the WooCommerce checkout page and how to add custom fields using plugins or your own coding skills.

Why is the 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 potential buyers are new to your business, this can make them 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.

Customizing WooCommerce Checkout Page Fields

Method #1: Customize WooCommerce Checkout 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, such as 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.

Method #2: Customize WooCommerce Checkout via Coding

This method adds the custom field to the checkout page using the code given. To start coding, follow the 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() {
    // Check 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.
• 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']));
    }
}

We have now added custom fields to our WooCommerce web store. You can also edit WooCommerce checkout fields using the Custom WooCommerce Checkout Fields Editor plugin.

Modifying WooCommerce Checkout Page Fields

Add WooCommerce Checkout Page Fields

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, which are 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:

Remove WooCommerce Checkout Page Fields

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. The required argument takes care of this, which 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.

Editing WooCommerce Checkout Page Fields

Editing WooCommerce checkout fields can significantly enhance your customers’ shopping experience, and using extensions makes this process simple.

1. Checkout Field Editor for WooCommerce

Checkout Field Editor for WooCommerce allows you to easily customize your store’s checkout process by adding, editing, or removing fields.

This helps you simplify the checkout process, collect important customer data, and improve conversion rates by reducing cart abandonment.

This extension enhances user satisfaction and provides more control over the checkout flow by allowing users to move core fields and maintain brand consistency.

Key features

• Easily add, edit, and remove checkout fields such as text, date pickers, dropdowns, checkboxes, and more.
• Rearrange or remove core WooCommerce checkout fields to suit your needs.
• Set conditions for displaying specific fields based on product, category, or cart content.
• Collect additional customer information for better insights and improved order management.
• Ensure proper data entry with built-in field validation options.

2. WooCommerce Checkout Add-Ons

WooCommerce Checkout Add-Ons extension allows you to enhance your checkout process by offering additional products, services, or options right before customers complete their purchase.

With the flexibility to add both free and paid add-ons, this tool can be tailored to fit various business models. A user-friendly interface allows you to configure options like tips, product customization, or insurance for high-value items.

Key Features

• Add free or paid options to your checkout, allowing you to offer personalized shopping experiences.
• Offering additional items directly on the checkout page, from product customizations to insurance for high-value items, can increase sales.
• Easily manage and configure add-ons through a simple interface, ensuring a seamless checkout flow without disrupting the customer experience.
• Uses the add-ons to your customers’ needs, boosting order value and enhancing satisfaction at the final stage of their purchase

Customize Your WooCommerce Checkout Page

1. Use the Woocommerce Cart and Checkout Blocks

The Woo Cart and Checkout Blocks extension is the first way to customize your WooCommerce Checkout page.

To get started, visit the WooCommerce Blocks page and click on the “Free Download” button.

You will then be guided through the checkout process, no payment is required.

With these blocks, you have room to enhance your checkout experience. You can configure product add-ons, accept multiple payment methods, provide express payment options, and more.

Please note that the Cart and Checkout blocks are compatible only with sites running WordPress 6.9 or higher.

Additionally, you will need to replace the existing shortcodes on your Cart and Checkout pages.

• Go to the Pages section in your dashboard and open your Checkout page
• Here, simply delete the current checkout shortcode [woocommerce_checkout].

• Next, search for the Checkout Block and add it to your page.
• You’ll now see a preview of your block-based cart, which you can customize using the settings available in the sidebar.

You’re now ready to customize your Checkout page! With the block settings, you can easily show or hide the checkout step numbers and manage the visibility of specific fields.

Similarly, you can configure paid add-ons, allow customers to apply coupons or add notes to their orders, enable multiple shipping options, and much more.

2. Customize Your WooCommerce Checkout Page Manually

Customizing your WooCommerce checkout page manually involves editing the code to match your design and functional needs.

Here’s a step-by-step guide to help you customize the WooCommerce checkout page manually.

Step 1: Create a Child Theme

Before making any changes, ensure that you’re working within a child theme. Directly modifying WooCommerce core or theme files is risky because updates can overwrite your changes. A child theme protects your customizations.

• To create a child theme, go to the wp-content/themes directory.
• Create a new folder for your child’s theme.
• Add a style.css file with the necessary information.
• Add a functions.php file where you will use the parent theme’s stylesheet.
• Copy the template files to form-checkout.php from the WooCommerce plugin directory to your child theme at woocommerce/templates/checkout/.

The path should be:

your-child-theme/woocommerce/checkout/

• Modify the copied template files as needed.

Step 2: Add/Remove Fields

To add, remove, or modify fields in the checkout form, you need to hook into WooCommerce’s woocommerce_checkout_fields filter in your functions.php file.

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

function custom_override_checkout_fields($fields) {
    // Add a custom field
    $fields['billing']['billing_custom_field'] = array(
        'type'        => 'text',
        'label'       => __('Custom Field', 'woocommerce'),
        'placeholder' => _x('Enter something here...', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
    );

    // Remove a field (e.g., billing company)
    unset($fields['billing']['billing_company']);

    return $fields;
}

Step 3. Rearrange Checkout Fields

If you want to reorder fields on the checkout page, you can set their priority in the woocommerce_checkout_fields filter:

add_filter('woocommerce_checkout_fields', 'custom_reorder_checkout_fields');

function custom_reorder_checkout_fields($fields) {
    $fields['billing']['billing_phone']['priority'] = 10;  // Move phone field up
    $fields['billing']['billing_email']['priority'] = 20;  // Move email field down
    return $fields;
}

Step 4: Customize the Checkout Button

You can also customize the checkout button using the woocommerce_order_button_html filter in your functions.php file:

add_filter('woocommerce_order_button_html', 'custom_woocommerce_order_button_html');

function custom_woocommerce_order_button_html() {
    $button_text = 'Place Order Now';  // Custom button text
    return '<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr($button_text) . '">' . esc_html($button_text) . '</button>';
}

This will modify the text or even the style of the “Place Order” button.

Step 5: Customize Checkout Page Layout

You can unhook and re-hook actions in WooCommerce’s checkout template. Add the following code to your functions.php file.

remove_action('woocommerce_checkout_order_review', 'woocommerce_order_review', 10);
add_action('woocommerce_checkout_billing', 'woocommerce_order_review', 20);

You can customize the following code and create a WooCommerce checkout page that matches your store’s needs.

Create a One-Page WooCommerce Checkout

CartFlows is a paid plugin that transforms your WooCommerce checkout process into a seamless, one-page experience.

CartFlows simplifies the buying journey, allowing customers to complete their purchases without navigating through multiple pages. This reduces cart abandonment and encourages quicker checkouts.

What sets CartFlows apart is its user-friendly drag-and-drop interface, which eliminates the need for any coding skills. You can create and manage your checkout pages quickly and intuitively, making them accessible for users of all technical levels.

Step 1: One-Page Checkout Template:

Choose your preferred Page Builder from the CartFlows Settings menu.

Step 2: Create Flows

Now, navigate to CartFlows > Flows.

Step 3: Adding Page Builder

Select Add New at the top of the screen to explore the templates available for the page builder you chose in Step 1.

Step 4: Adding Template To Your Woocommerce Store

• Start by browsing the template library displayed on your screen.
• You can easily filter or search through the list using relevant keywords, or if you prefer, start a checkout from scratch.
• Once you find the template you’d like to import, hover over it and click “View All Steps.”

Step 5: Import Flow from Theme

Next, click Import Flow, and the flow will begin importing into CartFlows

Once done, the landing page will now be imported and ready to customize!

Directly Link Products to the Checkout Page

• You must first install the Direct Checkout plugin to enable direct checkout links.
• Start by logging into your WordPress Admin Dashboard and navigating to Plugins > Add New.
• In the search bar at the top right, type “Direct Checkout for WooCommerce.“
• Once the plugin appears, click Install, and Activate the plugin.

Next, open plugin settings by navigating to WooCommerce > Direct Checkout from the sidebar.

• Now, go to the General tab and activate the Added to Cart Redirect option.
• Next, select Checkout from the Added to Cart Redirect dropdown.
• Click Save Changes to apply your settings.

Then, move to the Products tab and enable the option that says Redirect to the Cart page after successful addition. Click Save Changes, and you’re done!

With the Direct Checkout plugin now set up, your customers will bypass the cart page and proceed straight from the product page to checkout.

This simplifies the purchase journey, enhancing the shopping experience and potentially increasing your sales.

You can further customize various elements, such as direct checkout text, cart redirect links, and more.

Summary

In conclusion, by customizing the WooCommerce checkout page and adding/removing 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.