WooCommerce: Add Date of Birth Field to Registration Form

In this tutorial, we will guide you through the process of adding a Date of Birth field to the registration form in WooCommerce. It ensures that users provide their birthdate during registration, validates the input to avoid submission errors, and saves the entered date as user metadata. Additionally, it displays the user’s Date of Birth along with other account details on the ‘My Account’ page, improving user experience and data management within the WooCommerce ecosystem.

Default
After Changes

/**
* Snippet Name:  Add Date of Birth field to registration form
* Snippet Author: wpsnippets.dev
*/

// Add Date of Birth field to registration form
function wps_register_form_field(){
    woocommerce_form_field(
        'account_dob',
        array(
            'type'        => 'date',
            'required'    => true,
            'label'       => 'Date Of Birth'
        ),
        ( isset($_POST['account_dob']) ? $_POST['account_dob'] : '' )
    );
}
add_action( 'woocommerce_register_form', 'wps_register_form_field' );

// Validate Date of Birth field on registration form submission
function wps_validate_dob( $username, $email, $errors ) {
    if ( empty( $_POST['account_dob'] ) ) {
        $errors->add( 'date_of_birth_error', 'Date of Birth is required.' );
    }
}
add_action( 'woocommerce_register_post', 'wps_validate_dob', 10, 3 );

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

// Display account details summary on My Account page
function wps_display_account_details_summary() {
    if ( is_user_logged_in() ) {
        $user_id = get_current_user_id();
        $user_info = get_userdata( $user_id );

        if ( $user_info ) {
            $dob = get_user_meta( $user_id, 'account_dob', true );
            ?>
            <div class="account-details-summary">
                <h3><?php _e( 'Account Details', 'textdomain' ); ?></h3>
                <p><strong><?php _e( 'Email:', 'textdomain' ); ?></strong> <?php echo esc_html( $user_info->user_email ); ?></p>
                <p><strong><?php _e( 'Date of Birth:', 'textdomain' ); ?></strong> <?php echo esc_html( $dob ); ?></p>
                <!-- Add additional account details here -->
            </div>
            <?php
        }
    }
}
add_action( 'woocommerce_account_dashboard', 'wps_display_account_details_summary' );

Code Explanation

This Code snippet mainly uses 4 functions:

Adding Date of Birth Field to Registration Form:
- The function wps_register_form_field() adds a Date of Birth field to the WooCommerce registration form using the woocommerce_form_field() function. It sets the field type to ‘date,’ makes it required, and assigns a label ‘Date Of Birth.’
- The function is hooked to the ‘woocommerce_register_form‘ ensuring it appears on the registration form.
Validating Date of Birth Field on Registration Form Submission:
- The function wps_validate_dob() checks if the Date of Birth field is empty upon form submission. If it’s empty, it adds an error message to notify the user that the Date of Birth is required.
- The function is hooked to the ‘woocommerce_register_post‘. It calls validate wps_validate_dob function when the registration form is being processed.
Saving Date of Birth Field as User Meta:
- The function wps_save_dob_field() saves the entered Date of Birth as user metadata using update_user_meta(). It ensures that the Date of Birth is cleaned and formatted before saving it in the database.
- The function is hooked to woocommerce_created_customer. It calls the wps_save_dob_field function to save the Date of Birth as user metadata.
Displaying Account Details Summary on My Account Page:
- The function wps_display_account_details_summary() Retrieves the current user’s information and fetches their Date of Birth from the user meta. It then displays the user’s email and Date of Birth in a summary format on the My Account page.
- The function is hooked to woocommerce_account_dashboard. It calls the wps_display_account_details_summary function to display the account details summary.

Click here to explore the code snippet for adding the Date of Birth Field to the Account Details Page in WooCommerce.

WooCommerce: Add Date of Birth Field to Registration Form

Code Explanation

Leave a Comment Cancel Reply