How to Add a Custom Field to Your WooCommerce Checkout Page

WooCommerce is a powerful e-commerce platform for WordPress, and it offers a high degree of flexibility for customization. One common customization is adding custom fields to the checkout page to collect additional information from your customers. In this article, we'll guide you through the process of adding a custom phone field to the WooCommerce checkout using the provided code.

Why Add Custom Fields to WooCommerce Checkout?

Adding custom fields to your WooCommerce checkout page can be useful for a variety of purposes:

1. Collecting Additional Information: You might need extra information from customers, such as a phone number, special instructions, or other details specific to your business.

2. Tailoring the Checkout Experience: Custom fields allow you to customize the checkout experience to fit your business's needs and branding.

3. Enhancing Order Processing: The data collected can help streamline order processing and improve customer communication.

Now, let's dive into the steps to add a custom phone field to your WooCommerce checkout.

Step 1: Define the Custom Field

The first step is to define the custom field and its properties. In your WordPress theme's functions.php file, you can use the add_filter function to modify the checkout fields. In this case, we are adding a "Phone" field to the shipping section.

/**
 * Addons a new field into shipping form. Field title is "Phone"
 *
 * @param array $fields an array holding the form fields
 * @return void
 */
function jdhbp_shipping_phone_checkout( $fields ) {
   $fields['shipping']['shipping_phone'] = array(
      'label' => 'Phone',
      'type' => 'tel',
      'required' => false,
      'class' => array( 'form-row-wide' ),
      'validate' => array( 'phone' ),
      'autocomplete' => 'tel',
      'priority' => 25,
   );
   return $fields;
}

add_filter( 'woocommerce_checkout_fields', 'jdhbp_shipping_phone_checkout' );

In the code above, we specify the field label, type, validation rules, and other properties. You can adjust these parameters to meet your specific requirements.

Step 2: Save the Custom Field Data

To ensure that the data entered by the customer is saved with the order, you need to create a function that hooks into the woocommerce_checkout_update_order_meta action.

/**
 * Saves the custom field inputted values into database on order confirmation
 *
 * @param number $order_id the order id of the recently placed order.
 * @return void
 */
function jdhbp_save_shipping_phone( $order_id ) {
    if (isset($_POST['shipping_phone'])) {
        update_post_meta( $order_id, 'shipping_phone', sanitize_text_field( $_POST['shipping_phone'] ) );
    }
}

add_action( 'woocommerce_checkout_update_order_meta', 'jdhbp_save_shipping_phone' );

This code saves the phone number entered by the customer as post metadata associated with the order.

Step 3: Display the Custom Field Data

Lastly, you might want to display the custom field data on the order detail page in the WooCommerce admin. To do this, create a function that hooks into the woocommerce_admin_order_data_after_shipping_address action.

/**
 * Displays the custom checkout field data into order detail page.
 *
 * @param object $order
 * @return void
 */
function jdhbp_shipping_phone_checkout_display( $order ) {
    echo '<p><b>Shipping Phone:</b> ' . get_post_meta( $order->get_id(), 'shipping_phone', true ) . '</p>';
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'jdhbp_shipping_phone_checkout_display' );

This code retrieves and displays the phone number on the order detail page for easy reference.

Wrapping It Up

By following these steps and using the provided code, you can successfully add a custom phone field to your WooCommerce checkout. Customizing your checkout page not only enhances the customer experience but also enables you to collect valuable data to improve your business operations. Remember to test the functionality thoroughly to ensure it works as expected.