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.
/**
* 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 thewoocommerce_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.
- The function
- 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 callsvalidate
wps_validate_dob function when the registration form is being processed.
- The function
- Saving Date of Birth Field as User Meta:
- The function
wps_save_dob_field()
saves the entered Date of Birth as user metadata usingupdate_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 thewps_save_dob_field
function to save the Date of Birth as user metadata.
- The function
- 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 thewps_display_account_details_summary
function to display the account details summary.
- The function
Click here to explore the code snippet for adding the Date of Birth Field to the Account Details Page in WooCommerce.