How to Add the Shipping Phone number field on the WooCommerce checkout page?

Customers prefer separate phone numbers for billing and shipping because they want shipping-related messages to go to a different contact. Adding the phone number field in the shipping section of the checkout page helps store owners contact the right customer regarding delivery updates. It’s totally the store owner’s choice to make the fields optional or mandatory.

This post guides you well to add the Shipping Phone number field on the WooCommerce checkout page.

Where to Add Custom Code in WooCommerce?

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Solution: Add the Shipping Phone number field on the WooCommerce checkout page

This code will help to add a phone number field in the Shipping section.

add_filter( 'woocommerce_checkout_fields', 'ts_shipping_phone_checkout' );
 
function ts_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_action( 'woocommerce_admin_order_data_after_shipping_address', 'ts_shipping_phone_checkout_display' );
 
function ts_shipping_phone_checkout_display( $order ){
    echo '<p><b>Shipping Phone:</b> ' . get_post_meta( $order->get_id(), '_shipping_phone', true ) . '</p>';
}

Code Output 

Output 1

By default, the phone number field is not available in the “Ship to a different address?” section as shown below.

Output 2

The following output illustrates that the code adds the Phone number field into the Shipping section on the WooCommerce checkout page.

Also, the store owner can view this shipping phone number in the WordPress admin area. It will display the shipping phone number associated with that order under a “Shipping Phone:” label. 

Code Explanation

1. The code begins with a filter hook woocommerce_checkout_fields, and it’s set to trigger the function ‘ts_shipping_phone_checkout’  when processing the checkout fields in a WooCommerce store.
2. The function ts_shipping_phone_checkout is defined to modify the checkout fields.
3. $fields is an array that holds information about the checkout fields.
4. $fields[‘shipping’][‘shipping_phone’] is used to add a new field in the shipping section of the checkout page.
5. Properties of the added field:
   • ‘label’ => ‘Phone’: Sets the label for the field as “Phone.”
   • ‘type’ => ‘tel’: Specifies the input field type as ‘tel’, indicating it’s meant for telephone numbers.
   • ‘required’ => false: Makes the phone number field optional (not mandatory).
   • ‘class’ => array( ‘form-row-wide’ ): Applies a CSS class to the field, making it wider to enhance the layout.
   • ‘validate’ => array( ‘phone’ ): Requests validation for a valid phone number.
   • ‘autocomplete’ => ‘tel’: Provides a hint to browsers that this is a telephone number field.
   • ‘priority’ => 25: Sets the display priority of the field.
   • return $fields; ends back the modified field configuration to WooCommerce.
6. The add_action hook woocommerce_admin_order_data_after_shipping_address triggers the function bbloomer_shipping_phone_checkout_display after displaying the shipping address in the WooCommerce admin area when viewing an order.
7. The Function ts_shipping_phone_checkout_display is responsible for displaying the shipping phone number associated with an order.
8. It takes $order as a parameter, representing the order being viewed in the admin area.
9. echo ‘<p><b>Shipping Phone:</b> ‘ . get_post_meta( $order->get_id(), ‘_shipping_phone’, true ) . ‘</p>’; generates HTML output to display the shipping phone number.
10. get_post_meta( $order->get_id(), ‘_shipping_phone’, true ) retrieves the shipping phone number from the order’s metadata.
11. The phone number is displayed in a paragraph (<p>) with the label “Shipping Phone” in bold (<b>).

Conclusion

In the above code, the phone number field is added to the shipping section. You can modify the code to retrieve the shipping phone number associated with the order and include it in the email content using the woocommerce_email_order_details action hook.

Let us know your feedback on how the code was useful or any other queries in the comments section.