My Account

WooCommerce Custom Text Field On Registration Form

WooCommerce registration form showing custom text 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 you can add a custom text field on the registration form on the My Account page. In this specific example, we ask for the user’s license plate number. If empty, a custom error is shown. If validated properly, the text field is saved to the database as user meta and shown in the user profile editor in the WordPress Dashboard.

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

// Create the new license plate text field
add_action( 'woocommerce_register_form', 'ecommercehints_register_text_form_field' );
function ecommercehints_register_text_form_field() {
	woocommerce_form_field(
		'license_plate',
		array(
			'type'        => 'text',
			'required'    => true, // If true show an asterisk (*)
			'label'       => 'Vehicle License Plate',
			'description' => 'Personalised plates are permitted',
		),
		( isset($_POST['license_plate']) ? $_POST['license_plate'] : '' )
	);
}

// Show an error if license plate text field is not filled out when registering
add_action( 'woocommerce_register_post', 'ecommercehints_validate_license_plate', 10, 3 );
function ecommercehints_validate_license_plate( $username, $email, $errors ) {
	if ( empty( $_POST['license_plate'] ) ) {
		$errors->add( 'license_plate_error', 'We can\'t send you a quote without your license plate' );
	}
}

// Save the license plate text field as User Meta
add_action( 'woocommerce_created_customer', 'ecommercehints_save_license_plate_field' );
function ecommercehints_save_license_plate_field( $customer_id ){
	if ( isset( $_POST['license_plate'] ) ) {
		update_user_meta( $customer_id, 'license_plate', wc_clean( $_POST['license_plate'] ) );
	}
}

// Show license plate text 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="license_plate"><?php _e( 'license_plate' ); ?></label>
            </th>
            <td>
                <input type="text" name="license_plate" id="license_plate" value="<?php echo esc_attr( get_the_author_meta( 'license_plate', $user->ID ) ); ?>" class="regular-text" />
            </td>
        </tr>
    </table>
<?php
}

// Save new license plate text field 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( $user_id, 'license_plate', $_POST['license_plate'] );
}

Error Showing If Custom Field Is Empty

WooCommerce registration form showing a custom error if custom text field is empty

Custom Text Field Saved As User Meta

 

WordPress user editor showing user meta from custom text field on registration form

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