I am trying to display a custom user data field (Date of birth) in checkout page in woocommerce.
I added a custom date of birth field in my account registration form (image attached)
I added this with the following custom code in form-login.php via child theme at the given path \childtheme\woocommerce\myaccount\form-login.php
<p class="form-row form-row-wide">
<label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob" value="<?php if ( ! empty( $_POST['reg_customer_dob'] ) ) echo esc_attr_e( $_POST['reg_customer_dob'] ); ?>"/>
</p>
Complete code of form-login.php
<?php
/**
* Login Form
*
* This template overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php.
*
* I added new custom code for regsitration here.
* Task ID - https://taritas.anywhereapp.io/app/boards/666?taskId=16121
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 4.1.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
do_action( 'woocommerce_before_customer_login_form' ); ?>
<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>
<div class="u-columns col2-set" id="customer_login">
<div class="u-column1 col-1">
<?php endif; ?>
<h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2>
<form class="woocommerce-form woocommerce-form-login login" method="post">
<?php do_action( 'woocommerce_login_form_start' ); ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" />
</p>
<?php do_action( 'woocommerce_login_form' ); ?>
<p class="form-row">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
<input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span>
</label>
<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
<button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button>
</p>
<p class="woocommerce-LostPassword lost_password">
<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a>
</p>
<?php do_action( 'woocommerce_login_form_end' ); ?>
</form>
<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>
</div>
<div class="u-column2 col-2">
<h2><?php esc_html_e( 'Register', 'woocommerce' ); ?></h2>
<form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >
<?php do_action( 'woocommerce_register_form_start' ); ?>
<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<?php endif; ?>
<p class="form-row form-row-first">
<label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
</p>
<p class="form-row form-row-last">
<label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
</p>
<p class="form-row form-row-wide">
<label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob" value="<?php if ( ! empty( $_POST['reg_customer_dob'] ) ) echo esc_attr_e( $_POST['reg_customer_dob'] ); ?>"/>
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<p class="form-row form-row-wide">
<label for="reg_billing_email_cnfrm"><?php _e( 'Please Confirm Email Address ', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_email_cnfrm" id="reg_billing_email_cnfrm" value="<?php if ( ! empty( $_POST['billing_email_cnfrm'] ) ) echo esc_attr_e( $_POST['billing_email_cnfrm'] ); ?>" />
</p>
<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="confirm_password"><?php esc_html_e( 'Confirm Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="user_password_again" id="confirm_password" autocomplete="confirm-password" />
</p>
<?php else : ?>
<p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p>
<?php endif; ?>
<p class="form-row form-row-wide">
<label for="reg_billing_phone"><?php _e( 'Mobile', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php if ( ! empty( $_POST['billing_phone'] ) ) echo esc_attr_e( $_POST['billing_phone'] ); ?>" />
</p>
<div class="clear"></div>
<?php do_action( 'woocommerce_register_form' ); ?>
<p class="woocommerce-form-row form-row">
<?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
<button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
</p>
<?php do_action( 'woocommerce_register_form_end' ); ?>
</form>
</div>
</div>
<?php endif; ?>
<?php do_action( 'woocommerce_after_customer_login_form' ); ?>
And validating the above filed at the woocommerce_process_registration_errors hook. The validation code is -
function wooc_validate_extra_register_fields( $validation_errors,$username, $password,$email ) {
if ( isset( $_POST['reg_customer_dob'] ) && empty( $_POST['reg_customer_dob'] ) ) {
$validation_errors->add( 'reg_customer_dob_error', __( 'Date of birth cannot be left blank.', 'woocommerce' ) );
}
if ( empty( $email ) || ! is_email( $email ) ) {
//return new WP_Error( 'registration-error-invalid-email', __( 'Email address provided is invalid', 'woocommerce' ) );
error_log("Email address provided is invalid - " . $email);
$validation_errors->add( 'email_not_match_error', __( 'Email address provided is invalid', 'woocommerce' ) );
}
/*
if ( $_POST['billing_email_cnfrm'] != $_POST['email'] ) {
//$_POST['eamil'] Default eamil filed
$validation_errors->add( 'email_not_match_error', __( 'Confirm Email address does not match.', 'woocommerce' ) );
}
*/
/** Below Code added becouse code conflict in my account/Registration & chekout page/regsitration */
if(isset($_POST['billing_email']))
{
if($_POST['billing_email_cnfrm'] != $_POST['billing_email'])
{//$_POST['billing_email'] email filed in checkout page
error_log("Confirm Email address does not match AT checkout page for- " . $_POST['billing_email_cnfrm'] ."And User Email - " . $_POST['billing_email']);
$validation_errors->add( 'email_not_match_error', __( 'Confirm Email address does not match.', 'woocommerce' ) );
}
}
if( isset($_POST['email']))
{
if ( email_exists( $email ) ) {
error_log("An account already exists using this email address - " . $email);
$validation_errors->add( 'woocommerce_registration_error_email_exists', __( 'An account already exists using this email address, please use a different email address.', 'woocommerce' ) );
}
if ( $_POST['billing_email_cnfrm'] != $_POST['email'] ) {
//$_POST['eamil'] email filed in Myaccount regisration page
error_log("Confirm Email address does not match at registration page - " . $_POST['billing_email_cnfrm'] ."And User Email - " . $_POST['email']);
$validation_errors->add( 'email_not_match_error', __( 'Confirm Email address does not match.', 'woocommerce' ) );
}
}
/** End of above Code -- added becouse code conflict in my account/Registration & chekout page/regsitration */
if ( isset( $_POST['billing_email_cnfrm'] ) && empty( $_POST['billing_email_cnfrm'] ) ) {
$validation_errors->add( 'confirm_email_error', __( 'Confirm email address cannot be left blank.', 'woocommerce' ) );
}
if ( empty( $password ) ) {
//return new WP_Error( 'registration-error-missing-password', __( 'Password cannot be left blank.', 'woocommerce' ) );
error_log("Password cannot be left blank.");
$validation_errors->add( 'confirm_password_error', __( 'Password cannot be left blank.', 'woocommerce' ) );
}
if ( isset( $_POST['user_password_again'] ) && empty( $_POST['user_password_again'] ) ) {
$validation_errors->add( 'confirm_password_error', __( 'Confirm password cannot be left blank.', 'woocommerce' ) );
}
/*
if ( $_POST['user_password_again'] != $_POST['password'] ) {
//$_POST['password'] Default password filed
$validation_errors->add( 'password_not_match_error', __( 'Passwords do not match.', 'woocommerce' ) );
}*/
/** Below Code added becouse code conflict in my account/Registration & chekout page/regsitration */
if(isset($_POST['account_password'] ))
{
if ( $_POST['user_password_again'] != $_POST['account_password'] ) {
//$_POST['account_password'] Default password filed in Checkout page
error_log("Confirm Passwords do not match. at Checkout page - FOR" . $_POST['billing_email_cnfrm'] ."And User Email - " . $_POST['email']);
$validation_errors->add( 'password_not_match_error', __( 'Passwords do not match.', 'woocommerce' ) );
}
}
if(isset($_POST['password'] ))
{
if ( $_POST['user_password_again'] != $_POST['password'] ) {
//$_POST['account_password'] Default password filed in Myaccount regstration page
error_log("Confirm Passwords do not match. at registration page - FOR" . $_POST['billing_email_cnfrm'] ."And User Email - " . $_POST['email']);
$validation_errors->add( 'password_not_match_error', __( 'Passwords do not match.', 'woocommerce' ) );
}
}
/** End of above Code -- added becouse code conflict in my account/Registration & chekout page/regsitration */
if ( isset( $_POST['billing_phone'] ) && empty( $_POST['billing_phone'] ) ) {
$validation_errors->add( 'billing_mobile_number_error', __( 'Mobile number cannot be left blank.', 'woocommerce' ) );
}
if(!validate_mobile($_POST['billing_phone']))
{
$validation_errors->add( 'billing_mobile_number_error', __( 'Mobile number entry is numerical only and cannot contain any spaces.', 'woocommerce' ) );
}
return $validation_errors;
}
add_filter( 'woocommerce_process_registration_errors', 'wooc_validate_extra_register_fields', 10, 4 );
And saving this custom field in usermeta table at woocommerce_created_customer hook .The saving code is
function wooc_save_extra_register_fields( $customer_id ) {
$the_user = get_user_by( 'id', $customer_id );
if ( isset( $_POST['billing_phone'] ) ) {
// Phone input filed which is used in WooCommerce
update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
}
if ( isset( $_POST['billing_first_name'] ) ) {
//First name field which is by default
update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
// First name field which is used in WooCommerce
update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
}
if ( isset( $_POST['billing_last_name'] ) ) {
// Last name field which is by default
update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
// Last name field which is used in WooCommerce
update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
}
if ( isset( $_POST['reg_customer_dob'] ) ) {
// Phone input filed which is used in WooCommerce
update_user_meta( $customer_id, 'customer_dob', sanitize_text_field( $_POST['reg_customer_dob'] ) );
}
update_user_meta( $customer_id, 'new_reg_policy', '1');
}
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );
And data is saving to DB (image attached)
But after the login at the time of checkout, field is not displaying in checkout form.How can i display that custom DoB Field in the checkout form.I added the image for checkout page
I added custom date of birth field in check out form via the following code -
add_filter('woocommerce_checkout_fields', 'custom_woocommerce_checkout_form_fields');
function custom_woocommerce_checkout_form_fields( $fields )
{
$fields['billing']['reg_customer_dob'] = array(
'label' => __('Date of Birth', 'woocommerce'), // Add custom field label
'placeholder' => __('Date of Birth', 'woocommerce'), // Add custom field placeholder
'required' => true, // if field is required or not
'clear' => false, // add clear or not
'type' => 'text', // add field type
'class' => array('form-row form-row-wide'), // add class name
'priority' => 25, // Priority sorting option
);
$fields['account']['billing_email_cnfrm'] = array(
'label' => __('Confirm Email Address', 'woocommerce'), // Add custom field label
'placeholder' => __('Confirm Email Address', 'woocommerce'), // Add custom field placeholder
'required' => true, // if field is required or not
'clear' => false, // add clear or not
'type' => 'text', // add field type
'class' => array('form-row form-row-wide'), // add class name
);
$fields['account']['user_password_again'] = array(
'label' => __('Confirm Password', 'woocommerce'), // Add custom field label
'placeholder' => __('Confirm Password', 'woocommerce'), // Add custom field placeholder
'required' => true, // if field is required or not
'clear' => false, // add clear or not
'type' => 'text', // add field type
'class' => array('form-row form-row-wide'), // add class name
);
return $fields;
}
I added above code in function.php file and i am using the woocommerce_checkout_fields filter hook to display the filed in checkout form.
How Can i display this custom Dob field in checkout page. Please help me on this.
