How to Add WooCommerce Custom Registration Form Fields

Do you want to know, how to add WooCommerce custom registration form fields? I am sure your answer will be “Yes”

Let’s get started…

The custom user registration fields are added to the following pages

1- Registration Form

2- Account Edit Pages

3- Checkout Page Create Account Section

4- Admin User Add/Edit Pages

The tutorial is divided in multiple parts, at the end you can find complete code.

Following field types are added to WooCommerce Register, Account, Checkout and Admin side

• Text
• Number
• Textarea
• Select
• Checkbox
• Country
• Email

Add Custom Fields to WooCommerce Registration Form

The below image shows the fields added to the User Registration Form Page.

woocommerce_form_field( $key, $args, $value = null )

The woocommerce_form_field() outputs the form fields html. It accepts 3 parameters.
$key The $key is field Name and ID
$args Array options of form fields. This function supports all type of html form fields.
$value Field value

For more detail check woocommerce_form_field()

Add fields to WooCommerce Registration Form and Account Area.

The ci_print_user_frontend_fields() function add the custom fields to registration form and account area.
To make things clean, I added the fields code within ci_get_account_fields() function. This function is called and data is stored within $fields variable. The user related functions will be explained below.

The woocommerce_register_form action hook displays form fields on register form.
The woocommerce_edit_account_form action hook displays form fields on Accounts page.

Add the following code to the functions.php file

WooCommerce Custom User Form Fields

The ci_get_account_fields() functions contains array data of each fields. Each argument passed in the array is self explanatory. The ci_account_fields apply filter allow us to modify the array later to update the field $args.

Add the following code to the functions.php file

Add Posted Values to User Form Fields if Set

The ci_add_post_data_to_account_fields() function does 2 things.

• Firstly: If the $_POST object is empty then simply return normal fields.
• Secondly: If the $_POST value is set, then set the field’s value.

Add the following code to the functions.php file

Add Fields to WooCommerce Account page

The below image shows the fields added to the User Account Edit Page.

Fetch Saved User Data

The ci_get_userdata() function fetch the saved user data and user meta data from database. If the data is found function returns data else it return empty.

Add the following code to the functions.php file

Modify WooCommerce Checkboxes/Radio Form Fields

The ci_form_field_modify() function modifies the checkboxes and radio fields. It returns or prints the fields data. The ci_print_list_field() function displays the fields data.

Add the following code to the functions.php file

Print the Checkboxes and Radio Fields

The ci_print_list_field() function prints the Checkbox and Radio form fields. It also checks the conditions that field is not empty and required, the value is assigned to it, etc

Add the following code to the functions.php file

Get current User ID from Database

The ci_get_edit_user_id() fetches the current user ID from the database and returns the result.

Add the following code to the functions.php file

Save WooCommerce Register Form Fields

The ci_save_account_fields() saves data to database.

The ci_get_account_fields() functions contains form posted data. The foreach loop breaks each fields data, the wp_update_user() and update_user_meta() functions save fields.
 
The following action hooks saves custom field data.
woocommerce_created_customer stores customer data from Register/Checkout pages.
personal_options_update Stores admin account fields data.
edit_user_profile_update Stores edited fields data from user account page.
woocommerce_save_account_details Stores edited data for WooCommerce User Account.
 

Add the following code to the functions.php file
 

Check the key through ci_is_userdata() function. This is going to check whether WordPress has predefined this field e.g user_url

Add the following code to the functions.php file

 

This ci_is_field_visible() function checks if a specific field is visible or not on the certain page. It returns either true or false.

Add the following code to the functions.php file
 

Add WooCommerce Admin – User Add/Edit Page Fields

The below image shows the fields added to the admin side user add/edit page.

 
The ci_print_user_admin_fields() displays the custom form fields on admin user Add/Edit pages.

ci_get_account_fields() contains custom fields.
ci_is_field_visible() checks if fields is visible on admin side or not.
ci_get_edit_user_id() gets current user ID.
ci_get_userdata() fetches user data from database.

The show_user_profile action hook displays fields on add user page.

The edit_user_profile action hook shows fields on edit user page.
Add the following code to the functions.php file

Validate Custom Fields

The ci_validate_user_frontend_fields() function will validate the required fields. If fields are empty or wrong data entered then error displayed. The form will not be submitted until errors are corrected.

Add the following code to the functions.php file

 

Add Custom User Field to WooCommerce Checkout Page

The below image shows the custom fields added to check page user account section.

Then ci_checkout_fields() functions adds the custom fields to Checkout page create an account section. To display the fields tick the checkbox.

woocommerce_checkout_fields filter attaches the custom fields to checkout page.
 

Add the following code to the functions.php file

Complete Code: WooCommerce Custom Registration Form Fields

Below is the complete complete code, add it to functions.php file

 
 

Related Tutorials

How to Add WooCommerce Custom Product Fields
 
Custom WooCommerce Plugin Development
 
Flatsome Theme Customization
 
Custom User Registration Fields for WooCommerce