WooCommerce editable custom checkout field and displayed in formatted address - php

Question

I am adding mandatory shipping phone to woocommerce checkout page with
add_filter( 'woocommerce_checkout_fields', 'add_shipping_phone_to_checkout_page' );
function add_shipping_phone_to_checkout_page( $fields ) {
$fields['shipping']['shipping_phone'] = array(
'label' => 'Phone',
'required' => true,
'class' => array( 'form-row-wide' ),
'priority' => 25,
);
return $fields;
}
then display it in admin order panel
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'shipping_phone_checkout_display_in_order_panel' );
function shipping_phone_checkout_display_in_order_panel( $order ){
echo '<p><b>Phone :</b> ' . get_post_meta( $order->get_id(), '_shipping_phone', true ) . '</p>';
}
and finally print it in email
add_action('woocommerce_email_customer_details','shipping_phone_display_in_order_email', 25, 4 );
function shipping_phone_display_in_order_email( $order, $sent_to_admin, $plain_text, $email ) {
$output = '';
$shipping_phone = get_post_meta( $order->id, '_shipping_phone', true );
if ( !empty($shipping_phone) )
$output = '<p><strong>' . __( "Phone:", "woocommerce" ) . '</strong> ' . $shipping_phone . '</p>';
echo $output;
}
All works as it should. I'd like to achieve 2 enhancements but I am unable to do:
Make the custom phone field editable in admin panel
In email, move the custom phone field value in shipping address block
Any help would be appreciated

Answer 1

You need to make some changes in your code… The following code will display the shipping phone field in:
Checkout
My Account > Address > Edit shipping address
Admin order edit pages
The code will also add the shipping phone to formatted displayed shipping address on emails shipping address section.
// display shipping phone in checkout and my account edit shipping address
add_filter( 'woocommerce_shipping_fields', 'add_shipping_phone_field' );
function add_shipping_phone_field( $fields ) {
$fields['shipping_phone'] = array(
'label' => __('Phone (Shipping)'),
'required' => true,
'class' => array( 'form-row-wide' ),
'priority' => 25,
);
return $fields;
}
// Editable field on admin order edit pages inside edit shipping section
add_filter( 'woocommerce_admin_shipping_fields' , 'add_order_admin_edit_shipping_phone' );
function add_order_admin_edit_shipping_phone( $fields ) {
// Include shipping phone as editable field
$fields['phone'] = array( 'label' => __("Shipping phone"), 'show' => '0' );
return $fields;
}
// Adding custom placeholder to woocommerce formatted address only on Backend
add_filter( 'woocommerce_localisation_address_formats', 'admin_localisation_address_formats', 50, 1 );
function admin_localisation_address_formats( $address_formats ){
// Only in backend (Admin)
if( is_admin() || ! is_wc_endpoint_url() ) {
foreach( $address_formats as $country_code => $address_format ) {
$address_formats[$country_code] .= "\n{phone}";
}
}
return $address_formats;
}
// Custom placeholder replacement to woocommerce formatted address
add_filter( 'woocommerce_formatted_address_replacements', 'custom_formatted_address_replacements', 10, 2 );
function custom_formatted_address_replacements( $replacements, $args ) {
$replacements['{phone}'] = ! empty($args['phone']) ? $args['phone'] : '';
return $replacements;
}
// Add the shipping phone value to be displayed on email notifications under shipping address
add_filter( 'woocommerce_order_formatted_shipping_address', 'add_shipping_phone_to_formatted_shipping_address', 100, 2 );
function add_shipping_phone_to_formatted_shipping_address( $shipping_address, $order ) {
global $pagenow, $post_type;
// Not on admin order edit pages (as it's already displayed).
if( ! ( $pagenow === 'post.php' && $post_type === 'shop_order' && isset($_GET['action']) && $_GET['action'] === 'edit' ) ) {
// Include shipping phone on formatted shipping address
$shipping_address['phone'] = $order->get_meta('_shipping_phone');
}
return $shipping_address;
}
// Remove double billing phone from email notifications (and admin) under billing address
add_filter( 'woocommerce_order_formatted_billing_address', 'remove_billing_phone_from_formatted_billing_address', 100, 2 );
function remove_billing_phone_from_formatted_billing_address( $billing_address, $order ) {
unset($billing_address['phone']);
return $billing_address;
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
For billing custom fields, you will replace the hooks:
woocommerce_shipping_fields by woocommerce_billing_fields
woocommerce_admin_shipping_fields by woocommerce_admin_billing_fields
woocommerce_order_formatted_shipping_address by woocommerce_order_formatted_billing_address
(don't use the last function).
For the front endpoints:
On order received (thank you), order-pay, and myaccount / order-view, you will have to override via your active theme the template order/order-details-customer.php.
You will add inside the html tag <address> after line 52 the following:
<?php if ( $shipping_phone = $order->get_meta('_shipping_phone') ) : ?>
<p class="woocommerce-customer-details--phone"><?php echo esc_html( $shipping_phone ); ?></p>
<?php endif; ?>
On admin side, the shipping phone is displayed and editable:
On order-view, order-received and email notifications, the shipping phone is displayed at the end of the shipping address section: