¡Hola! ¿Cómo estás? espero que bien 🙂

En este artículo vamos a ver cómo instalar y configurar herramientas para facilitar el inicio de sesión, el registro y la recuperación de contraseña a nuestros clientes.

Mediante este par de plugins que te voy a mostrar vamos a poder minimizar la tasa de carritos abandonados, en muchas ocasiones el sistema integrado en WooCommerce no es suficientemente intuitivo… ¡así que vamos a ponerle solución!

Estos plugins son YITH Woocommerce Social Login y YITH Easy Login & Register Popup for WooCommerce

YITH Woocommerce Social Login: LINK OFICIAL DE DESCARGA

YITH Easy Login & Register Popup for WooCommerce: LINK OFICIAL DE DESCARGA

También puedes optar por lugares alternativos para la descarga: https://bit.ly/2Le7ctU

Tienes toda esta guía disponible en vídeo:

Antes de comenzar te indico que aquí tienes toda la documentación de ambos plugins:

Documentación de YITH Social Login

Documentación de YITH Easy Login & Register Popup for WooCommerce

Toda esta guía la tienes disponible en el canal de YouTube de Digital por tu cuenta, por si lo prefieres 🙂 

YITH Woocommerce Social Login

Comenzamos con el plugin de YITH Woocommerce Social Login.

Con esta herramienta vamos a permitir que nuestros visitantes y clientes inicien sesión usando credenciales de otros servicios, tales como Google, Twitter o Facebook.

Instalación

Vamos a ello. Una vez hayas descargado el plugin procedemos a instalarlo, iremos a Plugins y Añadir nuevo

Pulsamos en “Subir plugins” (en la parte superior)

Seleccionamos el archivo y pulsamos sobre “instalar ahora”.

Una vez instalado pulsamos en “activar”. Recuerda que siempre podrás activar y desactivar tus plugins desde la página de Plugins a la que puedes acceder desde el panel de la izquierda.

Cada uno de los servicios que queramos configurar requerirá una configuración específica, yo, en este artículo voy a explicarte paso a paso como integrar el inicio de sesión con Google.

Configuración

Definiremos a qué página irá el usuario una vez inicie sesión, por defecto viene que el usuario irá a la página en la que estaba previamente, esta configuración es adecuada, pero como ves puedes modificarla.

Nos deja también modificar los textos que muestra a los visitantes.

Veremos un panel general con los servicios de inicio de sesión que están activos en nuestra web.

La URL de rellamada podemos dejarla tal y como viene, con nuestro dominio principal.

A continuación podemos definir dónde queremos que se muestren los botones de inicio de sesión.

Por último definiremos en qué zona se le muestra esta información al usuario dentro del panel de su cuenta, podemos dejarlo como viene por defecto.

Vayamos ahora al grueso del asunto 🙂

Vamos a integrar la opción de inicio de sesión con Google, para configurar esta opción haremos clic sobre la pestaña “Google”. 

Los dos datos fundamentales que nos solicita son ID y Secret.

Vamos ahora a preparar estos datos.

Integrar el inicio de sesión por Google

Para habilitar este inicio de sesión tenemos generar unas credenciales relacionadas con el servicio de autenticación de Google OAuth 2.0.

El proceso detallado lo tienes aquí: 

https://support.google.com/googleapi/answer/6158849

El proceso puede ser un poquito más lioso así que vamos a verlo paso a paso:

Para este ejemplo voy a utilizar mi página web principal aureliocouso.com

El objetivo es crear un ID de cliente de OAuth 2.0

1.- Accedemos a la consola API: https://console.developers.google.com/

2.- Has de crear un proyecto en el que trabajar

Pulsas al lado de “Google cloud platform”

Y después sobre “nuevo proyecto”

Introducimos el nombre y creamos el proyecto, continuamos.

Si no tienes ninguna propiedad deberás crearla.

3.-Una vez en la propiedad generada pulsa sobre “credenciales”

En este panel ya podemos ver que está la zona que nos interesa

4.- Pulsamos sobre crear credenciales 

Pulsamos sobre “ID de cliente oAuth”

Ahora configura la página de consentimiento

El tipo de usuarios será externo

Ahora introduciremos los datos de nuestra aplicación

A partir de aquí únicamente has de continuar completando los requerimientos de información, por ejemplo si fuese para mi página web:

Añade los permisos que vas a solicitar al usuario (marcalos todos)

La aplicación pasará a estar el modo “prueba”, pero lo importante son las credenciales que vamos a generar a continuación.

Pulsas en continuar, te mostrará un resumen y ya has completado el proceso.

Vamos a generar el ID de cliente OAuth 2.0

Volvemos a Credenciales > Crear credenciales

Seleccionamos “aplicación web”

Ahora tenemos que introducir las URLs de redirección autorizadas, el plugin nos la indica

Para evitar algunos problemas vamos a introducir esa url y otra muy similar, pero quitando una de las barras:

Finalmente se generará tu id de cliente

Ahora simplemente lo integramos en el plugin, recuerda: ID y Secret.

Verificación de dominio para Google (si fuera necesario)

El dominio que utilicemos vamos a verificarlo

Como nos indica el sistema este dominio ha de estar ya añadido en Search Console

Si no lo tuviésemos registrado nos permitirá ir a hacerlo a Seach Console, el sistema será el de añadir un registro TXT a la configuración de dominio

Vamos a nuestros hosting (donde tengamos registrado el dominio) e iremos a la zona de configuración DNS, buscaremos el botón para agregar un registro TXT y pondremos el texto que nos indicó Search Console.

Ahora volvemos a la pestaña de Search console y pulsamos en “verificar”

Y ya lo tendríamos verificado

Ahora volveriamos al panel de “Verificación del dominio” y lo añadimos

Finalmente, lo marcamos como dominio permitido

Vayamos a probar ahora el plugin

Accedemos a la web desde una ventana de incógnito.

Añadimos un producto al carrito y cuando vamos a finalizar la compra podemos ver la opción de “iniciar sesión con red social”

Hacemos clic y nos saldrá el icono de Google, al hacer clic podemos ejecutar el proceso de registro.

También podemos ver la posibilidad de de acceso y registro a través de Google si vamos a la página de mi cuenta, desde lo clientes podrán acceder:

Comprobamos entonces que todo funciona perfectamente 😉

Cuando un cliente realice este proceso a nosotros nos aparecerá con todos sus datos como cliente en la zona de usuarios de nuestra tienda online.

Con este proceso tendríamos el sistema integrado, nuestros clientes podrán acceder a través de su cuenta de Google

YITH Easy Login & Register Popup for WooCommerce

Vamos ahora a ver las opciones de configuración de YITH Easy Login & Register Popup for WooCommerce, que permitirá hacer saltar un popup de inicio de sesión cuando se vaya a comenzar el proceso de “Finalizar la compra”.

Instalación

El proceso de instalación será el mismo que para cualquier otro plugin.

Cuando tengamos activado el plugin veremos en el panel izquierdo que nos aparece YITH y si ponemos el cursor por encima o hacemos clic veremos los plugins de esta empresa que tengamos instalados, en este caso vemos :

Configuración

Una vez hacemos click accedemos al panel general de la configuración del plugin, veremos aquí diferentes pestañas, cada una de ellas nos llevará a una sección, comenzamos con:

Ajustes generales

Este sistema de registro lo que hace es saltar un popup, no es un formulario integrado, podemos ver cómo se ve ya “por defecto” accediendo a nuestra web de incógnito (para que no vea que estamos ya logeados como administrador) añadiendo un productos al carrito y comenzando el proceso de checkout, cuando vamos a iniciarlo, si no hemos iniciado sesión, nos saltará el popup:

Y este va a ser el elemento que vamos a modificar y personalizar

Desde esta zona de Ajustes Generales podemos definir:

-El tamaño, en pixeles, de esta ventana emergente

-Habilitar/deshabilitar que el usuario pueda cerrar el popup haciendo clic en el fondo (además de la propia aspa del popup).

-Habilitar/deshabilitar el difuminado de fondo

-El tipo de animación que se muestra tanto cuando se abre el popup como cuando se cierra.

-Cambiar el icono para cerrar la ventana emergente, aquí puedes poner el que quieras, pero ten presente que se verá muy pequeñito.

-La paleta de colores completa del plugin, lo adecuado sería adaptarla a la paleta de colores de nuestra tienda online.

Opciones del primer paso

En esta pestaña de configuración podremos definir:

-El texto del encabezado, por defecto viene “Proceder al proceso de pago”; podríamos hacer más agradable el texto con un tono más cercano.

-El título posterior, por defecto “Pero primero… ¡inicia sesión o regístrate!

Podríamos sustituir estos textos por otros que se adecuen al tono de nuestra marca.

-Permitir que, además de poder usar el correo electrónico, el cliente pueda usar su nombre de usuario.

-Añadir un texto personalizado antes del formulario

-El texto que aparece en la casilla para introducir el correo electrónico

-El texto del botón

-Integrar las opciones de social login, tenemos disponibles Facebook y Google.

Veamos ahora cómo poder configurar estas opciones de login social

Integrar estas opciones requiere de tener algunos conocimientos técnicos.

Voy a indicar el paso a paso, sin entrar en demasiado detalle ya que las interfaces suelen cambiar cada poquito tiempo, pero de esta forma tendrás claro el proceso.

Antes de comenzar lo que tenemos que entender es que tenemos que generar una app para conectarla a este plugin, es decir, tenemos que habilitar un sistema, ya sea en Facebook o Google, que nos habilite a conectarnos a su servicio, de esa forma podrá el sistema validar al usuario.

Integrar el inicio de sesión por Facebook

Para integrar el inicio de sesión a través de Facebook, montaremos una app ¿Cómo? pues vamos por pasos.

Toda la información completa la tienes aquí: https://developers.facebook.com/docs/development

1.- Tienes que registrarte como desarrollador, simplemente es tener una cuenta creada, el link en el momento de la redacción de este artículo es: https://developers.facebook.com/docs/development/register

Este link puede cambiar, pero siempre será muy sencillo acceder desde https://developers.facebook.com

2.- Una vez tengas tu cuenta haz clic en Crear tu primera app

Si vas al panel de aplicaciones, pulsa sobre crear app.

3.- Selecciona el tipo de app, busca la opción que hable de “integrar experiencias” o temas relacionados con facilitar el inicio de sesión.

4.- Indicamos nombre de app y email.

Una vez esté generada la app tenemos que integrar en nuestro plugin los datos:

-ID de la app

-App secreta

Estos datos los encontraremos en nuestro panel de la aplicación

Una vez tengamos configurados los servicios que más nos interesen podemos continuar con la personalización del plugin:

Opciones de inicio de sesión

Aquí podremos modificar todos los textos de la ventana emergente así como decidir si queremos que quede marcado por defecto la opción de mantener la sesión abierta.

Opciones de registro

En esta pestaña personalizamos los textos y opciones predeterminadas de la zona de creación de cuentas.

Podremos activar/desactivar la casilla de verificación de la política de privacidad.

También podremos activar Google reCaptcha.

Aunque yo siempre para la seguridad antispam en WordPress te recomiendo integrar Clean Talk (lo tienes disponible aquí: http://bit.ly/3s6XaLW)

Opciones de contraseña perdida

Podremos personalizar todos los textos de los encabezados, etiquetas y cuerpos de las diferentes zonas.

Tenemos la opción de que la zona para escribir el correo electrónico se rellene automáticamente, esta puede ser una opción interesante.

Entre las opciones de recuperación de contraseña encontramos la posibilidad de eleguir el tipo de recuperación, la clásica sería a través de un enlace que envía al correo electrónico y la de “con código” generaría un código para que los usuarios puedan establecer la nueva clave sin dejar el proceso de pago, algo muy interesante.

Con toda esta configuración ya tenemos la herramienta habilitada.

Espero que este contenido te haya servido para aclararte un poquito mejor y valorar si es algo que necesitas en tu sitio web.

Muchas gracias por pasarte por aquí.

Nos leemos muy prontito.