My Account

WooCommerce Custom Date Field On Registration Form

WooCommerce Custom Date Field On Registration Form

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 implement a custom date picker field on the My Account registration form in WooCoomerce and save the data as User Meta shown in User Profile Editor in the Dashboard. The date is saved to the database. We’ve also implemented two validation methods. This particular guide asks for the user’s date of birth which is saved as user meta. We’ve made the field required so it must be entered. An error will show if the custom date of birth field is left blank. An error will also show if the user enters a date of birth later than the year of 2005.

/**
 * Snippet Name:	WooCommerce Date Of Birth Field On Registration Form
 * Snippet Author:	ecommercehints.com
 */

// Create the new Date Of Birth field
add_action( 'woocommerce_register_form', 'ecommercehints_register_date_form_field' );
function ecommercehints_register_date_form_field(){
	woocommerce_form_field(
		'date_of_birth',
		array(
			'type'        => 'date',
			'required'    => true, // Shows an asterisk if true (*)
			'label'       => 'Date Of Birth'
		),
		( isset($_POST['date_of_birth']) ? $_POST['date_of_birth'] : '' )
	);
}

// Show an error if Date Of Birth is not filled out when registering
add_action( 'woocommerce_register_post', 'ecommercehints_validate_dob', 10, 3 );
function ecommercehints_validate_dob( $username, $email, $errors ) {
	if ( empty( $_POST['date_of_birth'] ) ) {
		$errors->add( 'date_of_birth_error', 'We need to store this information to send you a birthday card.' );
	}
	if($_POST['date_of_birth'] > 2005) {
		$errors->add( 'date_of_birth_error', 'You must be born in 2006 or earlier' );
	}
}

// Save the Date Of Birth field as User Meta
add_action( 'woocommerce_created_customer', 'ecommercehints_save_dob_field' );
function ecommercehints_save_dob_field( $customer_id ){
	if ( isset( $_POST['date_of_birth'] ) ) {
		update_user_meta( $customer_id, 'date_of_birth', wc_clean( date("d/m/Y", strtotime($_POST['date_of_birth'])) ) );
	}
}

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

// Save new Date Of Birth 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, 'date_of_birth', date("d/m/Y", strtotime($_POST['date_of_birth'])) );
}

Validation Error If the Date Field Is Left Blank

WooCommerce custom date field on registration form showing an error when the date is not entered

Validation Error If the Date Field Is Not Before A Specific Year

WooCommerce custom date field on registration form showing an error when the user is not old enough to register

WooCommerce/WordPress User Profile Editor Showing Saved Date Field As User Meta

WooCommerce/WordPress User Profile Editor Showing Saved Date Field As User Meta

Snippet Benefits

  • Capture more customer information when they register for richer demographics

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