Add a mobile phone field on My account > edit account in Woocommerce

Question

my question: How to add mobile phone field in Woocommerce my-account/edit-account/ page (Related template: form-edit-account.php file)

Like in the following answer thread:
Saving the value of a custom field phone number in WooCommerce My account > Account details

But this answer code is incomplete as there is some missing hooked functions. Any help is appreciated to get something complete, meaning the field display.

Answer 1

You have 3 options to display a custom mobile phone field on My account > Edit account page:

1) As the first field using woocommerce_edit_account_form_start action hook (see below).

2) After existing fields using woocommerce_edit_account_form action hook:

// Display the mobile phone field
// add_action( 'woocommerce_edit_account_form_start', 'add_billing_mobile_phone_to_edit_account_form' ); // At start
add_action( 'woocommerce_edit_account_form', 'add_billing_mobile_phone_to_edit_account_form' ); // After existing fields
function add_billing_mobile_phone_to_edit_account_form() {
    $user = wp_get_current_user();
    ?>
     <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="billing_mobile_phone"><?php _e( 'Mobile phone', 'woocommerce' ); ?> <span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
    </p>
    <?php
}

// Check and validate the mobile phone
add_action( 'woocommerce_save_account_details_errors','billing_mobile_phone_field_validation', 20, 1 );
function billing_mobile_phone_field_validation( $args ){
    if ( isset($_POST['billing_mobile_phone']) && empty($_POST['billing_mobile_phone']) )
        $args->add( 'error', __( 'Please fill in your Mobile phone', 'woocommerce' ),'');
}

// Save the mobile phone value to user data
add_action( 'woocommerce_save_account_details', 'my_account_saving_billing_mobile_phone', 20, 1 );
function my_account_saving_billing_mobile_phone( $user_id ) {
    if( isset($_POST['billing_mobile_phone']) && ! empty($_POST['billing_mobile_phone']) )
        update_user_meta( $user_id, 'billing_mobile_phone', sanitize_text_field($_POST['billing_mobile_phone']) );
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

3) In a specific location, overriding myaccount/form-edit-account.php template file via the theme as explained on this documentation. and on this answer thread…

In this case you will need to add the following html code in the template (like in this answer thread):

 <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="billing_mobile_phone"><?php _e( 'Mobile phone', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
</p>

In this last case, you will need to add in your theme's function.php file the 2 last hooked functions from section 2 (validation and saving).