WooCommerce editable custom checkout field and displayed in formatted address

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

LoicTheAztec LoicTheAztec · Accepted Answer · 2020-04-30T13:36:56

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:

WooCommerce editable custom checkout field and displayed in formatted address

1 Answers