WooCommerce 2.1 Add Confirm Password Field at Checkout

February 25, 2014/Gerhard Potgieter

The last couple of weeks I have spent a lot of time working on some tutorials to reverse some of the changes introduced in WooCommerce 2.1 to the ways it was in WooCommerce 2.0.

This tutorial is another one of this cases, WooCommerce 2.1 removed the password confirm field and functionality from the checkout page as it was thought that should a customer make a typo in the password field they can easily just reset it via the password reset functionality in WooCommerce.

However if you would still like add this password confirm field to your WooCommerce 2.1 checkout page, good news is this is still possible.

The code below will add an additional field underneath your password field on the checkout page called Confirm Password and when the customer places the order it will check the two password field against each other and give an error message and prohibit checkout if they do not match.

Place the code below in your theme’s functions.php file

	<?php
	// place the following code in your theme's functions.php file
	// Add a second password field to the checkout page.
	add_action( 'woocommerce_checkout_init', 'wc_add_confirm_password_checkout', 10, 1 );
	function wc_add_confirm_password_checkout( $checkout ) {
	if ( get_option( 'woocommerce_registration_generate_password' ) == 'no' ) {
	$checkout->checkout_fields['account']['account_password2'] = array(
	'type' => 'password',
	'label' => __( 'Confirm password', 'woocommerce' ),
	'required' => true,
	'placeholder' => _x( 'Confirm Password', 'placeholder', 'woocommerce' )
	);
	}
	}

	// Check the password and confirm password fields match before allow checkout to proceed.
	add_action( 'woocommerce_after_checkout_validation', 'wc_check_confirm_password_matches_checkout', 10, 2 );
	function wc_check_confirm_password_matches_checkout( $posted ) {
	$checkout = WC()->checkout;
	if ( ! is_user_logged_in() && ( $checkout->must_create_account \|\| ! empty( $posted['createaccount'] ) ) ) {
	if ( strcmp( $posted['account_password'], $posted['account_password2'] ) !== 0 ) {
	wc_add_notice( __( 'Passwords do not match.', 'woocommerce' ), 'error' );
	}
	}
	}
	?>

view raw

functions.php

hosted with ❤ by GitHub

Categories: Tutorials, WooCommerceTags: Checkout, Confirm Password, WooCommerce, WooCommerce 2.1

14 Comments

KB
March 2, 2014 — 9:04 am

Reply

Thanks for posting this, boy it would be nice to see this kind of stuff posted officially on the woothemes site!

I got the above snippet working on WC 2.1.3 but I’m trying to do a similar thing on the main my-account login/registration page where I’m asking for FirstName/LastName + Password confirmation during registration.

Here’s my hook call

add_filter(‘woocommerce_registration_errors’, ‘registration_errors_validation’, 10,3);
function registration_errors_validation($reg_errors, $sanitized_user_login, $user_email) {
global $woocommerce;
extract($_POST);
if( $firstname == ” or $lastname == ” ) {
wc_add_notice( __( ‘Please fill in first and last name.’, ‘woocommerce’ ), ‘error’ );
}

if ( strcmp( $password, $password2 ) !== 0 ) {
wc_add_notice( __( ‘Passwords do not match.’, ‘woocommerce’ ), ‘error’ );
}
return $reg_errors;
}

This function does actually raise the errors, however it doesn’t fail on the error.
It looks like wc-customer-functions.php handles this as such :

$validation_errors = apply_filters( ‘woocommerce_registration_errors’, $validation_errors, $username, $email );

if ( $validation_errors->get_error_code() )
return $validation_errors;

for whatever reason ->get_error_code() doesn’t catch the problem and continues with the execution instead of exiting the function.

However class-wc-checkout.php handles this quite differently :
do_action( ‘woocommerce_after_checkout_validation’, $this->posted );

if ( ! isset( $_POST[‘woocommerce_checkout_update_totals’] ) && wc_notice_count( ‘error’ ) == 0 ) {

where I presume wc_notice_count has been affected by wc_add_notice() and hence it throws up the error and does not continue.

Is this a bug in Woocommerce? or is there something I’m doing wrong? Any idea how to work around this?

Loading...
- Gerhard
  March 7, 2014 — 7:50 am
  
  Reply
  
  Hi KB
  
  You need to return the error message as a WP_Error, so try the following code
  
  add_filter('woocommerce_registration_errors', 'registration_errors_validation', 10,3); function registration_errors_validation($reg_errors, $sanitized_user_login, $user_email) { global $woocommerce; extract($_POST); if( $firstname == '' or $lastname == '' ) { return WP_Error( 'registration-error', __( 'Please fill in first and last name.', 'woocommerce' ) ); }
  if ( strcmp( $password, $password2 ) !== 0 ) { return WP_Error( 'registration-error', __( 'Passwords do not match.', 'woocommerce' ) ); } return $reg_errors; }
  
  Loading...
  - Rafael
    August 23, 2014 — 3:30 pm
    
    Gerhard, do you still look at comments on this page?
    
    Loading...
- Kevin Brady
  February 22, 2015 — 12:06 am
  
  Reply
  
  I would like to thank you for your wonderful blogg !! Amazing.
  
  I have used the code “WooCommerce 2.1 Add Confirm Password Field on My Account Register Form” and “WooCommerce 2.1 Add Confirm Password Field at Checkout” fully tested it and it works fine. A real help !!
  
  The only point i would like to make for the less capable programmers is that without clearing browser cache and cookes before testing the site and the updated function.php. I got tons of PHP line errors without doing this. It throw me for a while and wasted time. Learnt from this and I thought I would pass this on as the code extension you have written /provided are fantastic.
  
  Please keep your blog up old chum. Everyone who is engaged in woocommerce development should subscribe to this blog and add to favourities.
  
  Loading...
ricky wang
March 19, 2014 — 12:15 pm

Reply

Hi Gerhard
thanks for your post, but when I place above code on function.php file. I can not open my website. I dont know where is wrong.

Loading...
Shane
April 14, 2014 — 5:11 am

Reply

Hi Gerhard,

Do you have anything similar for allowing users to create their own username like they could in WooCommerce 2.0?

WooCommerce 2.1 has changed the way it works so the username is now generated from the first part of the (ie before the @) email the user chooses.

Loading...
Josef
April 21, 2014 — 3:11 am

Reply

Hi Gerhard,

I tred this today but failed:

/* Add a second password field to the checkout page.*/

add_action( ‘woocommerce_checkout_init’, ‘wc_add_confirm_password_checkout’, 10, 1 );
function wc_add_confirm_password_checkout( $checkout ) {
if ( get_option( ‘woocommerce_registration_generate_password’ ) == ‘no’ ) {
$checkout->checkout_fields[‘account’][‘account_password2’] = array(
‘type’ => ‘password’,
‘label’ => __( ‘Passwort wiederholen’, ‘woocommerce’ ),
‘required’ => true,
‘placeholder’ => _x( ‘Passwort wiederholen’, ‘placeholder’, ‘woocommerce’ )
);
}
}

/* Check the password and confirm password fields match before allow checkout to proceed. */

add_action( ‘woocommerce_after_checkout_validation’,’wc_check_confirm_password_matches_checkout’, 10, 2 );
function wc_check_confirm_password_matches_checkout( $posted ) {
$checkout = WC()->checkout;
if ( ! is_user_logged_in() && ( $checkout->must_create_account || ! empty( $posted[‘createaccount’] ) ) ) {
if ( strcmp( $posted[‘account_password’], $posted[‘account_password2’] ) !== 0 ) {
wc_add_notice( __( ‘Passworteingabe stimmt nicht überein.’, ‘woocommerce’ ), ‘error’ );
}
}
}

If I type 2 differnt passwords in, I don’t get any error.

Whats wrong?

Loading...
Josef
April 21, 2014 — 3:19 am

Reply

I went a step forward. When I click the purchase button on the next site I got the error. Any thing to optimize to get the error after the submit button “Next” o the checkout registration site?

Thanks a lot

Josef

Loading...
Steve
May 4, 2014 — 6:17 am

Reply

Hi,

Same as above, any idea on how to get the username field back?

Thanks

Loading...
Rafael
August 22, 2014 — 8:38 pm

Reply

Hey Gerhard.

First, congrats on being so smart. Second, thanks for sharing your wit.

Your code worked well, but the field came with class form-row, instead of form-row-last, which makes the boxes of password and confirm password to be touching each other.

I tested changing it on firebug and it made it look the right way. But my problem is that I don´t know where to save that. Could you help me, please?

Loading...
- Gerhard
  August 28, 2014 — 3:55 pm
  
  Reply
  
  Hi Rafael, you can add a class by adding 'class' => array('form-row-last') underneath 'required' => true,
  
  Loading...
Eugene
January 27, 2015 — 9:15 am

Reply

Hello, your code snippet is missing from this page. Could you kindly update?

Loading...
Tony
May 21, 2015 — 4:30 pm

Reply

Thanks alot… So freaking helpful

Loading...
Prafulla Kumar Sahu
May 26, 2015 — 4:21 pm

Reply

I want to add email field in stead of confirm password, how I should do it, please help me.

Loading...