How to add a new field to my account details between other fields

With the snippet below we add a billing phone field to the account edit details.

This works without problems, only we would have liked to add the new field between the email and the password change section field.

add_action( 'woocommerce_edit_account_form_start', 'misha_add_field_edit_account_form' );
// or add_action( 'woocommerce_edit_account_form', 'misha_add_field_edit_account_form' );
function misha_add_field_edit_account_form() {

    woocommerce_form_field(
        'billing_phone',
        array(
            'type'        => 'text',
            'required'    => true, // remember, this doesn't make the field required, just adds an "*"
            'label'       => 'Phone',
            'description' => 'add your phone number',
        ),
        get_user_meta( get_current_user_id(), 'billing_phone', true ) // get the data
    );

}

/**
 * Step 2. Save field value
 */
add_action( 'woocommerce_save_account_details', 'misha_save_account_details' );
function misha_save_account_details( $user_id ) {

    update_user_meta( $user_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );

}

/**
 * Step 3. Make it required
 */
add_filter('woocommerce_save_account_details_required_fields', 'misha_make_field_required');
function misha_make_field_required( $required_fields ){

    $required_fields['billing_phone'] = 'Phone';
    return $required_fields;

}

Answer

The way you apply the code is recommended. However, because you want to add the new field in a very specific place, I would recommend the following

Step 1: overwriting the template file

https://github.com/woocommerce/woocommerce/blob/3.8.0/templates/myaccount/form-edit-account.php

• This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-edit-account.php.

Replace: line 42 – 47

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="account_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="email" class="woocommerce-Input woocommerce-Input--email input-text" name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" />
</p>

// ADD NEW FIELD HERE

<fieldset>

With

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="account_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="email" class="woocommerce-Input woocommerce-Input--email input-text" name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" />
</p>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="billing_phone"><?php esc_html_e( 'Billing phone', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="tel" class="woocommerce-Input woocommerce-Input--text input-text" name="billing_phone" id="billing_phone" autocomplete="tel" value="<?php echo esc_attr( $user->billing_phone ); ?>" />
</p>

<fieldset>

---

Step 2 & Step 3

To save and validate the field you can keep your existing code (I adjusted these slightly)

/**
 * Save field value
 */
function my_save_account_details( $user_id ) {
    if( isset( $_POST['billing_phone'] ) ) {
        update_user_meta( $user_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
    }
}
add_action( 'woocommerce_save_account_details', 'my_save_account_details' );

/**
 * Make it required
 */
function my_save_account_details_required_fields( $required_fields ){    
    $required_fields['billing_phone'] = 'Billing phone';
    return $required_fields;
}
add_filter('woocommerce_save_account_details_required_fields', 'my_save_account_details_required_fields');