My Account

WooCommerce Custom Select Field On Registration Form

woocommerce registration form showing custom select field

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About This Solution

This guide shows you how to add a custom select field (drop-down list) to the registration form on the my account page. In this specific guide, we ask the user for their preferred holiday destination as our dummy example is in the context of a holiday website. You could use this code to implement a select field to capture customer information which will make your demographic data much richer.

/**
 * Snippet Name:	WooCommerce Custom Select Field On Registration Form
 * Snippet Author:	ecommercehints.com
 */

// Create the new select drop down list field
add_action( 'woocommerce_register_form', 'ecommercehints_register_select_form_field' );
function ecommercehints_register_select_form_field() {
	woocommerce_form_field(
		'preferred_holiday_destination',
		array(
			'type'		=> 'select',
			'required'	=> true, // Shows an asterisk if true (*)
			'label'		=> 'Preferred Holiday Destination',
			'options'	=> array(
				''			=> 'Please select...',
				'London'	=> 'London', //
				'Ibiza'		=> 'Ibiza'
			)
		),
		( isset($_POST['preferred_holiday_destination']) ? $_POST['preferred_holiday_destination'] : '' )
	);
}

// Show an error if select field is not filled out when registering
add_action( 'woocommerce_register_post', 'ecommercehints_validate_select_field', 10, 3 );
function ecommercehints_validate_select_field( $username, $email, $errors ) {
	if ( empty( $_POST['preferred_holiday_destination'] ) ) {
		$errors->add( 'preferred_holiday_destination_error', 'We need to store this information to send you the right offers!' );
	}
}

// Save the select field as User Meta
add_action( 'woocommerce_created_customer', 'ecommercehints_save_select_field' );
function ecommercehints_save_select_field( $customer_id ){
	if ( isset( $_POST['preferred_holiday_destination'] ) ) {
		update_user_meta( $customer_id, 'preferred_holiday_destination', wc_clean( $_POST['preferred_holiday_destination'] ) );
	}
}

// Show select field in the User Editor
add_action('show_user_profile', 'custom_user_profile_fields');
add_action('edit_user_profile', 'custom_user_profile_fields');

function custom_user_profile_fields( $user ) { ?>
<h2>Custom user meta fields</h2>
    <table class="form-table">
        <tr>
            <th>
                <label for="preferred_holiday_destination"><?php _e( 'Destination' ); ?></label>
            </th>
            <td>
                <input type="text" name="preferred_holiday_destination" id="preferred_holiday_destination" value="<?php echo esc_attr( get_the_author_meta( 'preferred_holiday_destination', $user->ID ) ); ?>" class="regular-text" />
            </td>
        </tr>
    </table>
<?php
}

// Save new select if edited by admin
add_action( 'personal_options_update', 'update_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'update_extra_profile_fields' );
function update_extra_profile_fields( $user_id ) {
    if ( current_user_can( 'edit_user', $user_id ) )
		update_user_meta( $customer_id, 'preferred_holiday_destination', wc_clean( $_POST['preferred_holiday_destination'] ) );
}

Validation Error If The Select Field Is Left Blank

WooCommerce registration form showing an error is the custom select field does not have an option selected

WordPress User Profile Editor Showing The Saved Select Field Option

Wordpress user profile editor showing the registration custom select field saved option

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.

26027
WELCOME OFFER