In most ecommerce sites, we usually want to collect more user information during registration, not just a username and password. WooCommerce allows us to customize the template files for functional pages, which makes it possible to customize the fields on the user registration page and the My Account page. We only need to copy the relevant template files into the corresponding locations in the theme folder. After that, we can start customizing WooCommerce templates in development.
Edit WooCommerce’s form-login.php file inside the theme folder. For example, if I want to add the user’s name fields to the registration page, I can do it like this.
First, add the custom registration form fields
<p class="form-row form-row-wide">
<label for="reg_first_name"><?php _e( 'First Name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="input-text" required name="first_name" id="reg_first_name" value="<?php if ( ! empty( $_POST['first_name'] ) ) echo esc_attr( $_POST['first_name'] ); ?>" />
</p>
<p class="form-row form-row-wide">
<label for="reg_last_name"><?php _e( 'Last Name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="input-text" required name="last_name" id="reg_last_name" value="<?php if ( ! empty( $_POST['last_name'] ) ) echo esc_attr( $_POST['last_name'] ); ?>" />
</p>Then save that data during user registration
In functions.php, hook a function onto the user_register action to save the user data.
add_action( 'user_register', 'pft_registration_save', 10, 1 );
function pft_registration_save( $user_id ) {
if ( isset( $_POST['first_name'] ) )
update_user_meta($user_id, 'first_name', $_POST['first_name']);
if ( isset( $_POST['last_name'] ) )
update_user_meta($user_id, 'last_name', $_POST['last_name']);
if ( isset( $_POST['title'] ) )
update_user_meta($user_id, 'title', $_POST['title']);
if ( isset( $_POST['dob'] ) )
update_user_meta($user_id, 'dob', $_POST['dob']);
}Finally, add the same data fields to the account editing page
The code for the user edit page is in woocommerce/myaccount/form-edit-account.php. Just like form-login.php, you only need to add the corresponding fields.
<p class="form-row form-row-first">
<label for="account_first_name"><?php _e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="input-text" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
</p>
<p class="form-row form-row-last">
<label for="account_last_name"><?php _e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="input-text" name="account_last_name" id="account_last_name" value="<?php echo esc_attr( $user->last_name ); ?>" />
</p>Although it is technically feasible to collect more user information at the time of registration, it is worth asking whether doing so increases the difficulty of registration and lowers the registration conversion rate. Many users are sensitive about personal privacy, especially on the internet where trust may be limited. Before collecting more information, think carefully about whether the transaction can proceed normally without it. If the site can function properly without those fields, it is often better not to ask for them.
