In this tutorial I’ll show you how you will add the extra custom fields like first name, last name, phone number etc to your WooCommerce registration form.
To begin, make sure that the WooCommerce registration form is enabled on the account login page. For this, go to WooCommerce -> Settings -> Accounts & Privacy and check Enable customer registration on the “My account” page.
Now you will get the registration form at the frontend.
You will get the only email address field on your register form. I am enabling the username and password fields on the register form. So customer can easily create their own username and password for login.
After this, the register form is looking like this.
Adding Extra Fields
Now we shall add the extra fields like first name, last name, phone number, and so on, include the following lines of code toward the end of your functions.php, which is located in your theme folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/** * Extra custom fields variable * * @copyright PaulChinmoy.com * @author Paul Chinmoy **/ function paulc_wc_form_top_fields() { return array( 'account_first_name' => array( 'type' => 'text', 'id' => 'reg_first_name', 'class' => array( 'woocommerce-form-row', 'col-1', 'form-row-first' ), 'label' => __( 'First Name', 'paulc'), 'placeholder' => __( 'First Name', 'paulc'), 'required' => true ), 'account_last_name' => array( 'type' => 'text', 'id' => 'reg_last_name', 'class' => array( 'woocommerce-form-row', 'col-2' ), 'label' => __( 'Last Name', 'paulc'), 'placeholder' => __( 'Last Name', 'paulc'), 'required' => true ), 'phone' => array( 'type' => 'tel', 'id' => 'reg_phone', 'class' => array( 'woocommerce-form-row', 'woocommerce-form-row--wide', 'form-row-wide' ), 'label' => __( 'Phone', 'paulc'), 'placeholder' => __( 'Phone', 'paulc'), 'required' => true ), ); } /** * Adding the extra fields (first name, last name & phone number) to registration form * * @copyright PaulChinmoy.com * @author Paul Chinmoy **/ add_action( 'woocommerce_register_form_start', 'paulc_woocommerce_register_form_start_fields' ); function paulc_woocommerce_register_form_start_fields() { $fields = paulc_wc_form_top_fields(); foreach ( $fields as $key => $field_args ) { woocommerce_form_field( $key, $field_args, $_POST[ $key ] ); } } |
Now if you refresh the page, you’ll see the fields being added to WooCommerce registration form.
Validating the Custom Fields Data
We shall validate the custom fields data before saving them to database. You will add these lines of code toward the end of your functions.php file which located in the theme folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/** * Validating the registration form custom fields data * * @copyright PaulChinmoy.com * @author Paul Chinmoy **/ add_filter( 'woocommerce_registration_errors', 'paulc_validate_custom_fields_data_reg_form', 99 ); function paulc_validate_custom_fields_data_reg_form( $errors ) { $required_fields = array( 'account_first_name' => __( 'first name', 'woocommerce' ), 'account_last_name' => __( 'last name', 'woocommerce' ), 'phone' => __( 'valid phone number', 'paulc' ), ); foreach ( $required_fields as $field_key => $field_name ) { if ( empty( $_POST[ $field_key ] ) ) { $errors->add( $field_key . '-error', sprintf( __( 'Please enter your %s.', 'woocommerce' ), esc_html( $field_name ) ) ); } } $_POST[ 'phone' ] = WC_Validation::format_phone( $_POST[ 'phone' ] ); if ( '' !== $_POST[ 'phone' ] && ! WC_Validation::is_phone( $_POST[ 'phone' ] ) ) { $errors->add( 'reg-phone-error', __( 'Please enter your valid phone number.', 'woocommerce' ) ); } return $errors; } |
Saving the Custom Fields Data to Database
Lastly we shall save these extra new fields’ data to database for future use. Again you will add these lines of code into the end of the functions.php file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * Saving the fields data to database * * @copyright PaulChinmoy.com * @author Paul Chinmoy **/ add_action( 'woocommerce_created_customer', 'paulc_save_extra_register_fields', 99 ); function paulc_save_extra_register_fields( $customer_id ) { $account_first_name = ! empty( $_POST['account_first_name'] ) ? wc_clean( $_POST['account_first_name'] ): ''; $account_last_name = ! empty( $_POST['account_last_name'] ) ? wc_clean( $_POST['account_last_name'] ) : ''; $account_phone = ! empty( $_POST['phone'] ) ? wc_format_phone_number( $_POST[ 'phone' ] ) : ''; update_user_meta( $customer_id, 'first_name', $account_first_name ); update_user_meta( $customer_id, 'billing_first_name', $account_first_name ); update_user_meta( $customer_id, 'last_name', $account_last_name ); update_user_meta( $customer_id, 'billing_last_name', $account_last_name ); update_user_meta( $customer_id, 'billing_phone', $account_phone ); } |
We are done here! Now the recently added fields have been added, validated, and inserted for future use.
Advanced Coding
I did this advanced work for my client. I added the same extra fields to both register & account details form. So customer can edit the existing data from account details page.
Hi! Is it possible to upload file from the registration form? How to save it and how to show it in edit account form?
I’m afraid to share the code here. Lot of custom works are involved for attachment. You can contact me via contact form for this custom work, if you are still interested.
The fields are not adding in the registration form using a plugin. I am trying to add it manually using a code that is in this complete guide [link removed by admin]. Is there any alternative to do this? It would be really helpful if you could help me to add fields in the registration form.
Replace your code with this one. Hope that it will work