WooCommerce: Añadir campo de confirmación de contraseña

Uno de los errores más comunes de los usuarios a la hora de registrarse en un sitio es con la contraseña. En montones de ocasiones la teclean mal, o simplemente la olvidan.

Es por este motivo que en muchas webs, y especialmente en tiendas online donde se pida una contraseña para crear la cuenta de usuario, se pide que se repita la contraseña, lo que viene a ser un modo del que el cliente sea más consciente de la contraseña que elige para su cuenta, y de paso si es posible que la apunte en lugar seguro.

Desafortunadamente esta no es una funcionalidad que tenga WooCommerce por defecto ni que podamos activar con un simple clic en alguno de sus ajustes.

Pero, afortunadamente, al ser de código abierto y tener una amplia documentación y posibilidades de ampliación, es fácil añadir esta característica si la necesitamos.

Así que vamos a ver cómo añadir un campo de confirmación de la contraseña de usuario en los dos lugares en los que podríamos necesitarlo.

Cómo añadir un campo para confirmar la contraseña en la página de registro

Antes de nada, debemos tener activo el registro de usuarios en nuestra tienda online, algo que podemos activar en WooCommerce → Ajustes → Cuentas y privacidad.

Si tenemos activa esta posibilidad, por defecto veremos algo así.

Así que vamos a hacer un poco de magia y añadir el campo de confirmación de contraseña.

La magia viene, como siempre, de la mano de un poco de código, este:

/* Crea el campo de validación de contraseña en la página de registro */
function wc_register_form_password_validation() {
if ( get_option( 'woocommerce_registration_generate_password' ) == 'no' ) {
?>
<p class="form-row form-row-wide">
<label for="reg_password2"><?php _e( 'Repite la contraseña', 'woocommerce' ); ?> <span class="required">*</span></label>
<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" class="input-text" name="password2" id="reg_password2" autocomplete="current-password" />
</p>
<?php
}
}
add_action( 'woocommerce_register_form', 'wc_register_form_password_validation' );

/* Validar las contraseñas y definir el mensaje de error */
function register_password_validation($reg_errors, $sanitized_user_login, $user_email) {
global $woocommerce;
extract( $_POST );
if ( strcmp( $password, $password2 ) !== 0 ) {
return new WP_Error( 'registration-error', __( 'Las contraseñas no coinciden.', 'woocommerce' ) );
}
return $reg_errors;
}
add_filter('woocommerce_registration_errors', 'register_password_validation', 10,3);

Puedes añadir fácilmente este código, ya sea en un archivo de personalizaciones, el tema o mediante un plugin de códigos, siguiendo las instrucciones de esta guía:

Cómo y dónde pegar en WordPress códigos PHP, JS, CSS y funciones que encuentres por ahí

El resultado, tras guardar los cambios, será este.

Cómo añadir un campo para confirmar la contraseña en la página de pago o finalizar compra

El siguiente paso, ya incluso por coherencia, sería añadir el campo de confirmación también en la pagina de finalizar compra, para usuarios que no se hayan registrado previamente.

Solo un detalle antes de nada, y es que para que funcione, para que tu tienda online pida contraseñas, tanto en el caso anterior como en este, debes tener configurado que se le pida crear una contraseña al usuario al finalizar compra. Esto puedes configurarlo también en este caso en WooCommerce → Ajustes → Cuentas y privacidad, así:

Una vez confirmes que no está activa la casilla de la captura anterior, porque sino no le pediría contraseña, se crearía automáticamente, el código que añadirá el campo de confirmación de contraseña al finalizar compra será este:

/* Crea el campo de validación de contraseña en la página finalizar compra */
function wc_checkout_confirm_password_validation( $checkout ) {
if ( get_option( 'woocommerce_registration_generate_password' ) == 'no' ) {
$fields = $checkout->get_checkout_fields();
$fields['account']['account_confirm_password'] = array(
'type' => 'password',
'label' => __( 'Repite la contraseña', 'woocommerce' ),
'required' => true,
'placeholder' => _x( 'Contraseña', 'placeholder', 'woocommerce' )
);
$checkout->__set( 'checkout_fields', $fields );
}
}
add_action( 'woocommerce_checkout_init', 'wc_checkout_confirm_password_validation', 10, 1 );

/* Define el mensaje de error de validación y valida la contraseña en la página de finalización de compra */
function wc_checkout_password_validation( $posted ) {
$checkout = WC()->checkout;
if ( ! is_user_logged_in() && ( $checkout->must_create_account || ! empty( $posted['createaccount'] ) ) ) {
if ( strcmp( $posted['account_password'], $posted['account_confirm_password'] ) !== 0 ) {
wc_add_notice( __( 'Las contraseñas no coinciden.', 'woocommerce' ), 'error' ); 
}
}
}
add_action( 'woocommerce_after_checkout_validation', 'wc_checkout_password_validation', 10, 2 );

Revisa el punto anterior para seguir el enlace a la guía de cómo copiar y pegar códigos en tu WordPress si no sabes cómo hacerlo.  Y, cuando tengas aplicado el código obtendrás el resultado esperado:

Gracias a José Luis por compartir estos códigos en los foros.

(6 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido