How to change order/location of HTML form elements in registration page of woocommerce

Question

I added custom/extra user details in registration form of woocommerce (image attached ).

Fields shown in red box are custom fields.

My code for add custom fields.

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' );

Now i am trying to change the order of all form elements in registration form. But issue is I can only change the order of customize elements add by me.I am not able to change the order of predefined elements ( Username,Email address & password) with custom elements.

I am trying to achieve the following order -

1. Username (predefined)

2. First Name

3. Last Name

4. Date Of Birth

5. Email Address (predefined)

6. Please Confirm Email Address

7. Password (predefined)

8. Please Confirm Password

9. Mobile Number

Any advice

Answer 1

First, check this How to override WooCommerce template files?

You have to override the form-login.php file.

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

Copy file from this path.

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

and upload this path.

`wp-content/themes/your-active-theme-name/woocommerce/myaccount/form-login.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.

Now replace this below HTML in form-login.php as per your requirements.

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</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="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
    <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</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>

<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
    </p>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="confirm_password"><?php esc_html_e( 'Confirm Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="confirm_password" autocomplete="confirm-password" />
    </p>

<?php else : ?>

    <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p>

<?php endif; ?>

<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>

Tested and works