How to add a custom WooCommerce billing field 2024

In this guide, you will learn how to add a custom WooCommerce billing field. This will allow you to modify and insert a new field, such as a second phone number or birth date into the checkout. Below, I’ll provide a step-by-step explanation and a code example to demonstrate how you can add a new field.

Extending WooCommerce Checkout Fields

To add a custom billing field, we will use the WooCommerce woocommerce_checkout_fields filter. This filter enables you to modify and extend the array of form fields displayed on the checkout page.

Adding a Custom Billing Field

Let’s say you want to add a custom field for a second phone number. Here’s how you can do it:

/*
 * Snippet: How to add a custom WooCommerce billing field 2024
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?749
 * Tested with WooCommerce 8.8.2
*/
function wcsuccess_add_custom_billing_field( $fields ) {
    $fields['billing']['billing_phone2'] = array(
        'label'         => __('Second Phone Number', 'woocommerce'),
        'placeholder'   => _x('Enter a second phone number', 'placeholder', 'woocommerce'),
        'required'      => false,
        'class'         => array('form-row-wide'),
        'priority'      => 25,
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wcsuccess_add_custom_billing_field' );

Explanation of the Code

• woocommerce_checkout_fields filter: This is used to modify the checkout fields.
• Adding the field: We add an array to the $fields['billing'] array. This new array represents our custom field:
  • label: The label displayed to the user.
  • placeholder: Text that appears inside the field before the user enters a value.
  • required: Whether the field is required. Set to false if the field is optional.
  • class: CSS classes to apply to the field container for styling.
  • priority: The position of the field among other fields. Adjust this to change the field’s order on the checkout page.

Implementing the Code

Add this function to your theme’s functions.php file or a custom plugin designed for handling custom WooCommerce modifications.

Testing Your New Field

After implementing the code, test the checkout process to ensure the new field appears and behaves as expected. It should appear on the checkout page according to the specified priority, and since it’s not required, submitting the form without it should still proceed without errors.

Conclusion

Adding a custom billing field to your WooCommerce site can greatly enhance the checkout experience and provide additional important information needed for processing orders. Whether it’s a second phone number, birth date, or any other field, the process involves hooking into WooCommerce’s extensive list of filters and actions to customize according to your needs.

This straightforward guide shows you how to add these fields, helping you tailor the checkout process to meet your business requirements and improve customer interactions.

John Cook

I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.

Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science.  I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.

Google Scholar ID: https://scholar.google.com.au/citations?user=0KvpwNEAAAAJ&hl=en

ORCID: https://orcid.org/0000-0001-8113-1296