How to add the customers’ email and phone in the Order table of WordPress admin

Sometimes a store manager finds it a bit difficult to find customers’ email and phone from the orders of WooCommerce.  It’s a bit lengthy process since he has to open order management, then order details to view the information. To ease the process of finding customer information, we can add the customer’s email address and phone directly to the orders. This is actually the order table of the WordPress admin portal.

The default view

By default, the WooCommerce order table does not contain customers’ details. It looks like the following screenshot:

What we are expecting?

Here we wanted to show the customers’ email and phone in the orders table to the WordPress admins’ orders list. What we are trying to achieve is displayed in the following screenshot:

The store manager will see the customers’ email and phone directly with the order, under the Order column.

Let’s write some PHP script

To add the above-mentioned feature, let’s add the following code in the functions.php of your child theme:

<?php
// add customer email and phone to order in backend - order management
	function w3_customer_information_order_column( $column, $post_id ) {
	    if ( $column == 'order_number' ){
	        global $the_order;

	        if( $customer_phone = $the_order->get_billing_phone() ){
	            echo '<p><a href="tel:'.$customer_phone.'"><span class="dashicons dashicons-phone"></span> '.$customer_phone.'</a></strong></p>';
	        }

	        if( $customer_email = $the_order->get_billing_email() ){
	            echo '<p><a href="mailto:'.$customer_email.'"><span class="dashicons dashicons-email"></span> '.$customer_email.'</a></strong></p>';
	        }
	    }
	}

	add_action( 'manage_shop_order_posts_custom_column' , 'w3_customer_information_order_column', 50, 2 );
?>

Note: Don’t forget to check the opening and closing tags of PHP.

Dashicons

To make it more interactive, we have used dash-icons.

Dash-icon is the official icon of WordPress. The syntax for using dash-icons is:

<span class="dashicons dashicons-email"></span>

Click here to access the cheat sheet for dash icons.

In the next article, we will see how to add a customer’s email and phone in the order email of WooCommerce.