2 formas fáciles de habilitar el inicio de sesión con número de teléfono en WooCommerce

El inicio de sesión con número de teléfono es una característica útil diseñada para mejorar la experiencia del usuario y facilitar el proceso de inicio de sesión y registro. Por lo tanto, muchos usuarios de WooCommerce quieren implementar esta función en sus tiendas en línea.

Si usted es una de esas personas, entonces ha aterrizado en la página web correcta. Este artículo le enseñará cómo permitir que los usuarios inicien sesión y se registren con su número de teléfono de WooCommerce de dos maneras.

¿Por qué debería habilitar el inicio de sesión con el número de teléfono de WooCommerce en su tienda?

El registro telefónico y el inicio de sesión se han vuelto extremadamente útiles para las tiendas WooCommerce que dependen en gran medida de los números de teléfono móvil de los clientes. Por ejemplo, comida a domicilio, taxis, etc.

Además de estos nichos específicos, a continuación se presentan algunas ventajas que benefician a cualquier negocio.

• Los compradores pueden iniciar sesión y registrarse directamente con su número de teléfono en su tienda WooCommerce.
• Evita el spam de registro de clientes en tu tienda online.
• Los compradores también pueden iniciar sesión sin recordar su nombre de usuario y contraseña.
• Puede verificar los números de teléfono de los clientes mediante SMS de OTP.
• Todos los clientes verificados son genuinos y, por lo tanto, evitan pedidos falsos.
• Sus clientes pueden ser notificados rápidamente a través de dispositivos móviles, incluso si no tienen acceso a Internet.
• Puede llegar rápidamente a sus clientes con promociones y ofertas a través de sus números de teléfono.

Con estas ventajas, puede mejorar fácilmente su estrategia comercial y, eventualmente, el crecimiento de su consumo. Tienes todo lo que necesitas para comunicarte con tus clientes de la forma más sencilla y concreta.

#1: Habilite el inicio de sesión con número de teléfono en su tienda WooCommerce con un complemento

Hay varios plugins que pueden ayudarte con esto. Por ejemplo:

• Registro e inicio de sesión con número de teléfono móvil
• Dígitos: número de teléfono móvil de WordPress Formulario de registro e inicio de sesión de OTP
• Iniciar sesión con número de móvil para WooCommerce

Pero en este tutorial, usaremos el complemento "Iniciar sesión con número de teléfono", ya que es el gratuito más popular.

Instale el complemento Activar " Iniciar sesión con número de teléfono " en su tienda WooCommerce

Lo primero que debe hacer es instalar y activar el complemento " Iniciar sesión con número de teléfono " en su tienda WooCommerce . A continuación se encuentran las instrucciones.

1. En primer lugar, desde el panel de control de WordPress, vaya a la página Complementos > Agregar nuevo .

2. Ingrese "Iniciar sesión con número de teléfono" en el cuadro de búsqueda en la esquina superior derecha.
3. El complemento debe aparecer primero en la lista. Haga clic en el botón Instalar ahora que se muestra junto a su título.
4. Después de eso, se descargará el complemento. Una vez hecho esto, verá que el botón Instalar ahora cambia al botón Activar . Pinchalo.

Crear una nueva página de inicio de sesión/registro

El siguiente paso es insertar el código abreviado del complemento en una nueva página de inicio de sesión/registro.

1. Vaya a Página > Agregar nuevo desde el panel de control de WordPress.

2. Elija un título para la nueva página, por ejemplo, " Página de inicio de sesión/registro ".

3. Ponga el código abreviado [idehweb_lwp] dentro de él.
4. Publicar la página.

Obtenga 10,000 SMS OTP gratuitos por mes con Firebase

Cuando un nuevo usuario registra una cuenta en su tienda WooCommerce, se enviará un código de verificación a su número de teléfono móvil. Por lo tanto, deberá proporcionar una puerta de enlace SMS para que el complemento funcione correctamente.

Puedes usar Firebase de Google. Proporciona 10.000 SMS OTP al mes de forma gratuita. Aquí es cómo:

1. Inicie sesión en la consola de Firebase con su cuenta de Google.
2. Haga clic en el botón Crear un proyecto .

3. Ahora, deberá ingresar un nombre para el nuevo proyecto, aceptar los términos y condiciones de Firebase y hacer clic en el botón Crear proyecto .
4. Una vez que el proyecto se haya creado correctamente, en la barra lateral izquierda, vaya a la página Crear > Autenticación .

5. Haga clic en el botón Comenzar .
6. Elige Phone como proveedor.

7. Cambie el interruptor en la esquina superior derecha para habilitar esta opción. Luego haga clic en el botón Guardar .

8. Desplácese hacia abajo hasta la sección Dominios autorizados . Haga clic en el botón Agregar dominio e ingrese el nombre de dominio de su tienda WooCommerce. Luego haga clic en el botón Agregar .

9. Ahora, ve a la pestaña Plantillas .

10. Haga clic en el icono del lápiz junto al texto del idioma de la plantilla . A continuación, elija el idioma que prefiere que se utilice para la verificación por SMS.

11. Haga clic en el icono de rueda dentada junto al texto Descripción general del proyecto y seleccione Configuración del proyecto .

12. Desplázate hacia abajo hasta las secciones Tus aplicaciones . A continuación, haga clic en el icono de la web.

13. Introduzca un apodo para su nueva aplicación. Luego haga clic en el botón Registrar aplicación .

14. Elija la opción Usar una etiqueta <script> y copie los scripts proporcionados.

15. Ahora, ve al panel de control de WordPress de tu tienda WooCommerce. Luego visite la página de "configuración de inicio de sesión".

16. Pegue los scripts en el cuadro de texto de configuración de Firebase .
17. De vuelta a la ventana de Firebase, copie la clave de API proporcionada en los scripts.

18. Vuelva a la ventana de WordPress, pegue la clave de la API en el cuadro de texto de la API de Firebase .

19. Finalmente, desplácese hacia abajo hasta la parte inferior de la página y haga clic en el botón Guardar cambios .

Además, aquí es donde puede configurar la aplicación. Debe verificar la configuración para ver si hay algo más que deba ajustar.

#2: Habilite el inicio de sesión con número de teléfono en su tienda WooCommerce mediante programación

En este tutorial, agregaremos una opción de número de teléfono más en el formulario de inicio de sesión de su tienda WooCommerce. Tenga en cuenta que esto no envía SMS OTP para verificar usuarios como en el tutorial anterior.

Los usuarios pueden elegir lo que les resulte más conveniente. Es posible que haya visto esto en el formulario de inicio de sesión de Amazon. Permite a los usuarios iniciar sesión con un correo electrónico o un número de teléfono.

Deberá agregar un código PHP personalizado al archivo "functions.php" del tema actualmente activo. Si no sabe cómo hacerlo, siga las instrucciones a continuación:

1. Vaya a la página Apariencia > Editor de archivos de temas desde el panel de control de WordPress.

2. Elija el tema que está utilizando en la esquina superior derecha.
3. Accede al archivo “functions.php” desde la barra lateral derecha.

Añadir entrada de número de teléfono

Para habilitar el inicio de sesión con el número de teléfono de WooCommerce en su sitio de comercio electrónico de WordPress, debe almacenar los números de teléfono de los usuarios en la tabla "wp_usermeta".

Esto se puede hacer en el momento del registro del usuario. Puede usar el siguiente código para lograr este objetivo.

 <?php $user_id = 1; // pass user id $phone_number = 9999999999; add_user_meta( $user_id, 'user_phone', $phone_number);

Una vez que tenga una meta_clave "user_phone" con su valor, puede verificar las credenciales del usuario con un número de teléfono.

Crear un formulario de inicio de sesión

Ahora, creemos un formulario de inicio de sesión simple donde los usuarios pueden ingresar sus datos de inicio de sesión. Contará con los siguientes elementos:

• Un campo de texto para ingresar un nombre de usuario/correo electrónico/teléfono
• Un campo de texto para ingresar una contraseña.
• Un nonce para evitar ataques CSRF (es un campo oculto)
• Un botón de enviar

 <?php $return = log_the_user_in(); if( is_wp_error( $return ) ) { echo $return->get_error_message(); } ?> <form method="post"> <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p> <p><input type="password" name="user_password" placeholder="Password" required /></p> <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" /> <input type="submit" name="btn_login" value="Submit" /> </form>

En los scripts anteriores, agregamos código HTML y también llamamos al método "log_the_user_in()". Este se encarga de comprobar las credenciales del usuario.

Si ocurren algunos errores en el lado del servidor, informaremos al usuario a través del método “get_error_message()”.

En el siguiente paso, necesitaremos definir el método “log_the_user_in()” y devolver el error.

Iniciar sesión con números de teléfono en WooCommerce

Cuando un usuario complete las credenciales y haga clic en el botón Enviar, obtendremos las credenciales y las verificaremos con la base de datos.

Si todo coincide, iniciaremos sesión y los redirigiremos a la página de inicio. Para inicios de sesión falsos, los errores se registrarán utilizando la clase "WP_Error". Según sus necesidades, puede cambiarlo a cualquier otra página modificando el código.

Definiremos el método “log_the_user_in()” en el gancho “init”. Este enlace se activa después de que WordPress haya terminado de cargarse, pero antes de que se envíe cualquier encabezado. Esto es ideal para procesar un formulario utilizando el método POST.

A continuación se muestra el código:

 add_action( 'init', 'log_the_user_in' ); function log_the_user_in() { if ( ! isset( $_POST['btn_login'] ) ) return; if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) { return new WP_Error('invalid_data', 'Invalid data.'); } if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) { return new WP_Error('empty', 'Both fields are required.'); } if ( is_email( $_POST['user_login'] ) ) { // check user by email $user = get_user_by( 'email', $_POST['user_login'] ); } elseif ( is_numeric( $_POST['user_login'] ) ) { // check user by phone number global $wpdb; $tbl_usermeta = $wpdb->prefix.'usermeta'; $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) ); $user = get_user_by( 'ID', $user_id ); } else { // check user by username $user = get_user_by( 'login', $_POST['user_login'] ); } if ( ! $user ) { return new WP_Error('wrong_credentials', 'Invalid credentials.'); } // check the user's login with their password. if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) { return new WP_Error('wrong_credentials', 'Invalid password.'); } wp_clear_auth_cookie(); wp_set_current_user($user->ID); wp_set_auth_cookie($user->ID); wp_redirect(get_bloginfo('url')); exit; }

Aquí, primero verificamos el nonce para proteger el formulario de ciertos tipos de uso indebido, código malicioso y ataques CSRF.

Luego, basado en el método “is_email()” o “is_numeric()”, WordPress buscará un correo electrónico o número de teléfono válido. Si el valor ingresado no es un correo electrónico o un número de teléfono, buscaremos un nombre de usuario.

Ultimas palabras

Se trata de agregar el inicio de sesión del número de teléfono en su tienda WooCommerce. Espero haberte ayudado con tu proyecto.

Si este artículo le resultó útil, siéntase libre de compartir sus pensamientos y sugerencias en la sección de comentarios a continuación.