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
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
Thanks Imran, wondering if you have any video tutorial or YouTube Channel
Hi, how could I avoid to show in error message the html added in the label section? For example if I add terms and cond checkbox field with an tag to link to privacy page, it shows tag in the error message.
Thank you
Hi, awesome code!
How do I show the fields in checkout if the user is logged in?
Thank you so much!
Please check my tutorial, these fields will also be shown for logged-in user
https://codeinform.com/woocommerce-checkout-page-fields/
Hi, the best article about this topic so far, congratulations. Managing custom fields on registration and checkout is often challenging, I really like your approach, clear and well structured.
Thanks for sharing
Thank You.
Thanks Imran, a detailed article on WooCommerce registration fields from all aspects on different pages. Can you recommend any good tutorial for custom WooCommerce product fields? Thanks again.
Sound Good!
Please check my tutorials for WooCommerce Simple Product Fields https://codeinform.com/how-to-add-woocommerce-custom-product-fields/
and this one for WooCommerce Product Variation Fields (Variable Product) https://codeinform.com/how-to-add-fields-to-woocommerce-variable-product/