How to Display custom user registration details in Account Details page in woocommerce

Question

I added custom/extra user details in registration form of woocommerce (image attached - https://i.ibb.co/m5rG84C/stack1.png).

To add new form elements i used woocommerce_register_form action hook

add_action( 'woocommerce_register_form', 'Add_extra_register_fields' );

To save the data i used woocommerce_created_customer action hook.

All the above are working fine. I added this via child theme.

Now i am trying to show that custom fields in Account details page in Woocommerce user login area.(image attached - https://i.ibb.co/pZt4BBk/stack2.png) But i am not able to do this. Can someone please guide me on this.

thanks

Update - Code for my extra fields are as follows -

    function My_extra_register_fields() {?>
   <br><hr>

   <p class="form-row form-row-wide">
    <label for="reg_password_again"><?php _e( 'Please Confirm Password', 'woocommerce' ); ?><span class="required">*</span></label>
    <input type="text" class="input-text" name="user_password_again" id="reg_password_again" />
    </p>

    <p class="form-row form-row-first">
    <label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
    </p>
    <p class="form-row form-row-last">
    <label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
    </p>
    <p class="form-row form-row-wide">
    <label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
    <input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob"  />
    </p>
    
    <p class="form-row form-row-wide">
    <label for="reg_billing_email_cnfrm"><?php _e( 'Please Confirm Email Address ', 'woocommerce' ); ?><span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_email_cnfrm" id="reg_billing_email_cnfrm"  />
    </p>
    <p class="form-row form-row-wide">
    <label for="reg_billing_phone"><?php _e( 'Mobile', 'woocommerce' ); ?><span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone"  />
    </p>

    <p class="form-row form-row-wide">
    
    <input type="checkbox" name="reg_mkt_email" id=""  />Check 1
    </p>

    <p class="form-row form-row-wide">
    
    <input type="checkbox" name="reg_mkt_number" id=""  />Check 2 
    </p>



    <div class="clear"></div>
    <?php
}
add_action( 'woocommerce_register_form', 'My_extra_register_fields' );

code to save extra fields.

    function ___save_extra_register_fields( $customer_id ) {
         if ( isset( $_POST['reg_customer_dob'] ) ) {
            // Phone input filed which is used in WooCommerce
            update_user_meta( $customer_id, 'customer_dob', sanitize_text_field( $_POST['reg_customer_dob'] ) );
           }
    // ............. like this for all ......
    }
add_action( 'woocommerce_created_customer', '___save_extra_register_fields' );

Answer 1

There are two ways to do this.

First, check this How to override WooCommerce template files?

You have to override the form-edit-account.php file.

`wp-content/pluings/woocommerce/templates/myaccount/form-edit-account.php`

Copy file from this path.

`wp-content/pluings/woocommerce/templates/myaccount/form-edit-account.php`

and upload this path.

`wp-content/themes/your-active-theme-name/woocommerce/myaccount/form-edit-account.php`

Now you can edit this file and add your custom fields.

You can get the `$user` object to this file. and based on that you can get user meta.

Second, You can use woocommerce_edit_account_form_start or woocommerce_edit_account_form hook to add your fields. check below code.

add_action( 'woocommerce_edit_account_form_start', 'add_my_custom_fileds_to_user_accound_detail_page', 10, 1 );
function add_my_custom_fileds_to_user_accound_detail_page(){
    $user = wp_get_current_user();
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
        <label for="my_custom_field"><?php esc_html_e( 'My Custom field', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="my_custom_field" id="my_custom_field" autocomplete="given-name" value="" />
    </p>
    <p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
        <label for="my_custom_field2"><?php esc_html_e( 'My Custom field 2', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="my_custom_field2" id="my_custom_field2" autocomplete="given-name" value="" />
    </p>
    <?php
}

Tested and works

As per OP Request

you can get custom data using get_user_meta();

add_action( 'woocommerce_edit_account_form_start', 'add_my_custom_fileds_to_user_accound_detail_page', 10, 1 );
function add_my_custom_fileds_to_user_accound_detail_page(){
    $user = wp_get_current_user();
    ?>
    <p class="form-row form-row-wide">
        <label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob" value="<?php echo echo get_user_meta( $user->ID, 'customer_dob', true ); ?>" />
    </p>
    <?php
}