Creating advanced wholesale registration forms
WooCommerce Wholesale Pro comes with a customizable wholesale registration form and you can add up to 10 additional text fields to the form.
This article describes several methods which you can use to create more advanced registration forms. You may wish to do this if you need extra features such as:
- Additional field types, e.g. file upload fields, checkboxes and radio buttons.
- Conditional logic (e.g. showing and hiding fields based on the user's answers).
- A dropdown allowing the user to choose their role.
- A separate forms for each wholesale role.
You can do this by using either a WordPress forms plugin such as Profile Builder or Gravity Forms to create any type of field; or by using custom code to add dropdown, radio buttons and checkboxes to the WooCommerce Wholesale Pro registration form.
If you use Profile Builder or Gravity Forms to create a registration form, then you will be using those plugins for the wholesale registration process instead of WooCommerce Wholesale Pro. You can still use all the other features in WooCommerce Wholesale Pro including the wholesale login page, wholesale pricing, category visibility, etc. The emails in WooCommerce Wholesale Pro will not be used because you are using Gravity Forms for the registration process, so you should enable the appropriate email notifications in Profile Builder/Gravity Forms.
Method 1: Profile Builder
Profile Builder lets you create advanced registration forms for your wholesale users. You will need the main Profile Builder plugin and its WooCommerce Sync add-on:
- On the WooCommerce Wholesale Pro plugin settings page, do not click the option to enable wholesale registration (because you'll be using Profile Builder for this instead).
- Install Profile Builder on your website. Enable the WooCommerce Sync add-on.
- Go to Profile Builder → Form Fields to choose the custom field types you’d like to add to your wholesale form.
- Go to Profile Builder → Registration Forms to create a new wholesale registration form.
- Add different custom field types to your wholesale registration form. For example:
- File upload field for company registration documentation or tax status.
- Terms and conditions checkbox.
- Use the Set Role option to select the user role the registrant should be assigned. Alternatively, you can add a Select (User Role) field type directly to your form if you want to let registrants choose their user role instead of assigning one yourself.
- Add different custom field types to your wholesale registration form. For example:
- Go to Profile Builder → Settings → General Settings and set the "Admin Approval" Activated: option to Yes.
- Create a new page and add the Profile Builder shortcode
[wppb-register form_name="wholesale-registration"]. This will be your wholesale registration page, which you will use instead of the registration form that comes with WooCommerce Wholesale Pro.
The finished wholesale registration page will look something like this:
Method 2: Gravity Forms
You can also create a custom wholesale registration form using the Gravity Forms plugin:
- On the WooCommerce Wholesale Pro plugin settings page, do not click the option to enable wholesale registration (because you'll be using Gravity Forms for this instead).
- Install Gravity Forms and the User Registration Add-On. You’ll need to purchase the Elite License.
- Go to Forms → Add New and create a wholesale registration form, including the extra fields you require such as multiple field types, a user role dropdown or conditional logic.
- Use the User Registration Add-On documentation to create a feed that will automatically create a user on your WordPress site whenever someone submits the wholesale registration form:
- Go to Settings → User Registration and click the Add New button.
- Set Action to Create User and then configure the User Settings accordingly. Make sure you select the appropriate wholesale role.
- If you want to manually approve the new wholesale user before they can log into their account for their time, then when you create the feed, you should set the 'User Activation' option to Manual.
- Finally, create a new page and use the 'Add Form' option to insert the form. This will be your wholesale registration page, which you will use instead of the registration form that comes with WooCommerce Wholesale Pro.
The finished wholesale registration page will look something like this:
Method 3: Do it with code
The following information will show you how to create extra field types for the wholesale registration form and save them to the user's profile. The fields are added programmatically with code and require WordPress development knowledge - this is advanced usage of WooCommerce Wholesale Pro and isn’t covered by our standard plugin support.
The code should be placed in a custom plugin or your child theme’s functions.php file. We have also created an example plugin which contains the complete code from the tutorial which you can download here (if you do this, then you don't need to add the code snippets manually).
1. Adding the fields to the wholesale registration form
First, let’s create a wcwp_register_hooks function to register our hooks and create our first add_action call to the wcwp_register_form hook. This will allow us to display fields on the registration form.
function wcwp_register_hooks() {
add_action( 'wcwp_register_form', 'wcwp_output_custom_field_types', 1 );
}
add_action( 'init', 'wcwp_register_hooks' );
In the function below, we call the woocommerce_form_field function to create a dropdown, radio buttons, and a checkbox. These fields will be displayed on the Wholesale Pro registration form below the email address field.
Follow the inline comments to adjust the types of field and output.
/**
* 1. Adding the fields on the registration form
*/
function wcwp_output_custom_field_types() {
/**
* The Dropdown
*/
$dropdown_key = 'my_custom_dropdown'; // the key for your custom dropdown field, rename this to something relevant to the field data
woocommerce_form_field(
$dropdown_key,
array(
'type' => 'select',
'required' => 'yes', // is a value required for registration?
'label' => __( 'My Select Field', 'wcwp-custom-field-types' ), // add a label
'description' => __( 'Optional description about the field.', 'wcwp-custom-field-types' ), // add a description or remove
'options' => array(
'' => __( 'Select an option..', 'wcwp-custom-field-types' ), // add your options next as value => label
'one' => __( 'One', 'wcwp-custom-field-types' ),
'two' => __( 'Two', 'wcwp-custom-field-types' ),
),
),
isset( $_POST[ $dropdown_key ] ) ? $_POST[ $dropdown_key ] : ''
);
/**
* The Radio Buttons
*/
$radio_key = 'my_custom_radios'; // the key for your custom radios field, rename this to something relevant to the field data
woocommerce_form_field(
$radio_key,
array(
'type' => 'radio',
'required' => 'yes', // is a value required for registration?
'label' => __( 'My Radio Buttons Field Label', 'wcwp-custom-field-types' ), // add a label
'description' => __( 'Optional description about the field.', 'wcwp-custom-field-types' ), // add a description or remove
'options' => array( // add your options as value => label
'one' => __( 'One', 'wcwp-custom-field-types' ),
'two' => __( 'Two', 'wcwp-custom-field-types' ),
),
),
isset( $_POST[ $radio_key ] ) ? $_POST[ $radio_key ] : ''
);
/**
* The Checkbox
*/
$checkbox_key = 'my_custom_checkbox'; // the key for your custom checkbox field, rename this to something relevant to the field data
woocommerce_form_field(
$checkbox_key,
array(
'type' => 'checkbox',
'required' => 'yes', // is a value required for registration?
'label' => __( 'My Checkbox Field Label', 'wcwp-custom-field-types' ), // add a label
'description' => __( 'Optional description about the field.', 'wcwp-custom-field-types' ), // add a description or remove
),
isset( $_POST[ $checkbox_key ] ) ? $_POST[ $checkbox_key ] : ''
);
}
Check your wholesale registration page and you should now see the fields.
2. Validating the field data upon submission
Now that we’ve added our fields, we’ll need to validate that the customers have entered the information correctly. In the above function, all the fields are set to ‘required’, so at a minimum we will need to check that values have been provided for this field.
To do this, create another add_action call to the wcwp_register_post hook. So our wcwp_register_hooks function looks like this now:
function wcwp_register_hooks() {
add_action( 'wcwp_register_form', 'wcwp_output_custom_field_types', 1 );
add_action( 'wcwp_register_post', 'wcwp_validate_field_types', 10, 3 );
}
add_action( 'init', 'wcwp_register_hooks' );
The hook provides three parameters ($username, $email, $errors) to help you validate fields.
For each field type created above, we need to check the value and if we want to report a validation error then we add it to the $errors object.
So in the function below, we check that a value has been provided for all the required fields and if not we add an error to the $error_object. Remember to update the keys if you changed them in Step 1 of the tutorial.
/**
* 2. Validate the fields
*
* @param string $username
* @param string $email
* @param WP_Error $errors
*/
function wcwp_validate_field_types( $username, $email, $errors ) {
/**
* The Dropdown
*/
$dropdown_key = 'my_custom_dropdown'; // !! Change this to the key you chose in Step #1 !!
if ( empty( $_POST[ $dropdown_key ] ) ) {
$errors->add( 'required_field', 'Please provide values for the custom select field.' );
}
/**
* The Radio Buttons
*/
$radio_key = 'my_custom_radios'; // !! Change this to the key you chose in Step #1 !!
if ( empty( $_POST[ $radio_key ] ) ) {
$errors->add( 'required_field', 'Please provide values for the custom select field.' );
}
/**
* The Checkbox
*/
$checkbox_key = 'my_custom_checkbox'; // !! Change this to the key you chose in Step #1 !!
if ( empty( $_POST[ $checkbox_key ] ) ) {
$errors->add( 'required_field', 'Please provide values for the custom select field.' );
}
}
3. Saving the field data after validation
Now that we’ve validated the submitted data from the registration, we should save that data to the user’s profile. To do this we create an add_action call to the wcwp_created_customer hook.
function wcwp_register_hooks() {
add_action( 'wcwp_register_form', 'wcwp_output_custom_field_types', 1 );
add_action( 'wcwp_register_post', 'wcwp_validate_field_types', 10, 3 );
add_action( 'wcwp_created_customer', 'wcwp_save_field_types', 10, 2 );
}
add_action( 'init', 'wcwp_register_hooks' );
In the function below, we check if data is being provided for each field key we created in Step 1 and then use the update_user_meta function to attach that data to the user’s profile. You’ll also notice the use of the wc_clean function to sanitize the provided data.
/**
* 3. Save the field data
*
* @param int $customer_id
* @param array $new_customer_data
*/
function wcwp_save_field_types( $customer_id, $new_customer_data ) {
/**
* The Dropdown
*/
$dropdown_key = 'my_custom_dropdown'; // !! Change this to the key you chose in Step #1 !!
if ( isset( $_POST[ $dropdown_key ] ) ) {
update_user_meta( $customer_id, $dropdown_key, \wc_clean( $_POST[ $dropdown_key ] ) );
}
/**
* The Radio Buttons
*/
$radio_key = 'my_custom_radios'; // !! Change this to the key you chose in Step #1 !!
if ( isset( $_POST[ $radio_key ] ) ) {
update_user_meta( $customer_id, $radio_key, \wc_clean( $_POST[ $radio_key ] ) );
}
/**
* The Checkbox
*/
$checkbox_key = 'my_custom_checkbox'; // !! Change this to the key you chose in Step #1 !!
if ( isset( $_POST[ $checkbox_key ] ) ) {
update_user_meta( $customer_id, $checkbox_key, \wc_clean( $_POST[ $checkbox_key ] ) );
}
}
The fields should now appear on the wholesale registration form, and the data entered into them should be saved when the form is submitted.
Next, we’ll add the fields to the user profile page in the WordPress admin so that your shop managers and administrators can view the information that new wholesale users add to the extra fields.
4. Adding the fields to the user profile page
In order to add fields to the user profile page, we make use of two hooks: edit_user_profile for display; and edit_user_profile_update to save any changed data for the new fields.
So we’ll create two new add_action calls in our wcwp_register_hooks function:
function wcwp_register_hooks() {
add_action( 'wcwp_register_form', 'wcwp_output_custom_field_types', 1 );
add_action( 'wcwp_register_post', 'wcwp_validate_field_types', 10, 3 );
add_action( 'wcwp_created_customer', 'wcwp_save_field_types', 10, 2 );
add_action( 'edit_user_profile', 'wcwp_output_user_fields', 999, 1 );
add_action( 'edit_user_profile_update', 'wcwp_save_user_fields', 999, 1 );
}
add_action( 'init', 'wcwp_register_hooks' );
In the function below, we demonstrate constructing the field HTML for the dropdown, radio buttons, and checkbox fields. You’ll notice that we don’t use the woocommerce_form_field function because this page requires us to output our fields in a <table> layout.
Please note that for the dropdown and radio button fields, you will need to replicate the values you provided as options to the woocommerce_form_field function in Step 1.
/**
* 4a. Outputs the fields on the user profile page in wp-admin
*
* @param WP_User $user
*/
function wcwp_output_user_fields( $user ) {
?>
<div id="wcwp-registration fields-section">
<h2><?php _e( 'Wholesale Custom Fields', 'wcwp-custom-field-types' ); // add your own header here ?></h2>
<table class="form-table">
<!-- The Dropdown -->
<?php
$dropdown_key = 'my_custom_dropdown'; // !! Change this to the key you chose in Step #1 !!
$dropdown_value = get_user_meta( $user->ID, $dropdown_key, true );
?>
<tr>
<th>
<label for="<?php echo esc_attr( $dropdown_key ); ?>"><?php _e( 'My Custom Dropdown', 'wcwp-custom-field-types' ); ?></label>
</th>
<td>
<select name="<?php echo esc_attr( $dropdown_key ); ?>" id="<?php echo esc_attr( $dropdown_key ); ?>">
<!-- Replicate the values and labels you created in step one -->
<option value=""><?php _e( 'Select an option..', 'wcwp-custom-field-types' ); ?></option>
<option value="one" <?php selected( $dropdown_value, 'one', true ); ?>><?php _e( 'One', 'wcwp-custom-field-types' ); ?></option>
<option value="two" <?php selected( $dropdown_value, 'two', true ); ?>><?php _e( 'Two', 'wcwp-custom-field-types' ); ?></option>
</select>
</td>
</tr>
<!-- The Radio Buttons -->
<?php
$radio_key = 'my_custom_radios'; // !! Change this to the key you chose in Step #1 !!
$radio_value = get_user_meta( $user->ID, $radio_key, true );
?>
<tr>
<th>
<label><?php _e( 'My Custom Radios', 'wcwp-custom-field-types' ); ?></label>
</th>
<td>
<!-- Replicate the values and labels you created in step one -->
<input
type="radio"
name="<?php echo esc_attr( $radio_key ); ?>"
id="<?php echo esc_attr( $radio_key ); ?>_one"
value="one"
<?php checked( $radio_value, 'one', true ); ?>
/>
<label for="<?php echo esc_attr( $radio_key ); ?>_one"><?php _e( 'One', 'wcwp-custom-field-types' ); ?></label>
<input
type="radio"
name="<?php echo esc_attr( $radio_key ); ?>"
id="<?php echo esc_attr( $radio_key ); ?>_two"
value="two"
<?php checked( $radio_value, 'two', true ); ?>
/>
<label for="<?php echo esc_attr( $radio_key ); ?>_two"><?php _e( 'Two', 'wcwp-custom-field-types' ); ?></label>
</td>
</tr>
<!-- The Checkbox -->
<?php
$checkbox_key = 'my_custom_checkbox'; // !! Change this to the key you chose in Step #1 !!
$checkbox_value = get_user_meta( $user->ID, $checkbox_key, true );
?>
<tr>
<th>
<label for="my_custom_checkbox"><?php _e( 'My Custom Checkbox', 'wcwp-custom-field-types' ); ?></label>
</th>
<td>
<input
type="checkbox"
name="<?php echo esc_attr( $checkbox_key ); ?>"
id="<?php echo esc_attr( $checkbox_key ); ?>"
value="1"
<?php checked( $checkbox_value, '1', true ); ?>
/>
</td>
</tr>
</table>
</div>
<?php
}
Then finally, you should use the saving functional below to save any changes made from this page. We again use the update_user_meta function to attach that data to the user’s profile, similar to Step 3 but intended for the user profile page in the WordPress admin.
* 4b. Saves the fields on the User profile page in wp-admin
*
* @param int $user_id
*/
function wcwp_save_user_fields( $user_id ) {
// check we have the right permissions for Edit User
if ( ! current_user_can( 'edit_user', get_current_user_id() ) ) {
return false;
}
/**
* The Dropdown
*/
$dropdown_key = 'my_custom_dropdown'; // !! Change this to the key you chose in Step #1 !!
if ( isset( $_POST[ $dropdown_key ] ) ) {
update_user_meta( $user_id, $dropdown_key, sanitize_text_field( $_POST[ $dropdown_key ] ) );
}
/**
* The Radio Buttons
*/
$radio_key = 'my_custom_radios'; // !! Change this to the key you chose in Step #1 !!
if ( isset( $_POST[ $radio_key ] ) ) {
update_user_meta( $user_id, $radio_key, sanitize_text_field( $_POST[ $radio_key ] ) );
}
/**
* The Checkbox
*/
$checkbox_key = 'my_custom_checkbox'; // !! Change this to the key you chose in Step #1 !!
if ( isset( $_POST[ $checkbox_key ] ) ) {
update_user_meta( $user_id, $checkbox_key, sanitize_text_field( $_POST[ $checkbox_key ] ) );
}
}
Congratulations! If you’ve made it here then you’ve created your own fully functional custom field types for the wholesale registration form. Again, this is a developer-level task and if you don't know how to follow these instructions then we recommend using Codeable: