La página de inicio de sesión de WooCommerce es suficiente para muchas tiendas, pero carece de control de diseño. Y los propietarios de las tiendas pueden querer personalizar el inicio de sesión de WooCommerce para que coincida mejor con su marca.
En este tutorial, explicamos las formas de personalizar el inicio de sesión de WooCommerce , luego pasamos a un tutorial sobre cómo diseñar un formulario de inicio de sesión y registro único para sus clientes de WooCommerce.
Cómo funciona la página de inicio de sesión de WooCommerce
Después de instalar WooCommerce, el complemento genera automáticamente una página Mi cuenta en su tienda: es una página que muestra el contenido con el [woocommerce_my_account]código abreviado.
La página Mi cuenta es la página de inicio de sesión principal para los clientes; puede cambiarle el nombre y agregarla al menú de navegación.
Cuando un cliente va a la página, ve un formulario simple para escribir un nombre de usuario y una contraseña de inicio de sesión.
Una vez que inician sesión, ven el módulo Mi cuenta para ver pedidos recientes, descargas, direcciones, detalles de la cuenta y más.
La pestaña Detalles de la cuenta permite a los usuarios ajustar su información de inicio de sesión.
Además, puede agregar un widget de inicio/cierre de sesión en cualquier área compatible con widgets de su sitio web, como en la barra lateral o el pie de página.
Esto presenta los mismos campos para que los visitantes del sitio inicien sesión con su nombre de usuario/correo electrónico y contraseña.
¿Cómo se personalizan los formularios de inicio de sesión predeterminados de WooCommerce?
Si desea personalizar el formulario de inicio de sesión de WooCommerce, tiene varias opciones:
- Use un complemento que reemplace completamente la página Mi cuenta en WooCommerce. Las opciones incluyen registro de usuario, formularios de registro/inicio de sesión de usuario de WPForms , ventana emergente de inicio de sesión/ registro y el complemento de registro de usuario de Woosuite .
- Instale un complemento que le permita personalizar aún más la página actual de Mi cuenta con puntos finales. Los complementos para esto incluyen Personalizar mi cuenta para WooCommerce y el Editor de la página de Mi cuenta . YITH también tiene uno .
- Use un creador de páginas con un widget de Mi cuenta , luego reemplace completamente la página anterior de Mi cuenta con una nueva: Elementor tiene uno de estos widgets en su versión Pro. También puede buscar diferentes estilos con complementos de Elementor, como el widget de mi cuenta de PowerPack WooCommerce .
- Agregue fragmentos y enlaces al archivo functions.php de su sitio. Userinsights.com tiene una guía para ayudar con esto. Solo considere este método si desea mantener la página Mi cuenta predeterminada (en lugar de reemplazarla por completo) para cambiar sus estilos. No recomendamos esto para el usuario promedio, ya que es más complicado y aún no le brinda tanto control de personalización sobre el inicio de sesión de WooCommerce.
Le recomendamos que explore todas las opciones enumeradas anteriormente. Es mejor que el usuario promedio de WordPress use un complemento para reemplazar la página predeterminada de Mi cuenta o para mantener esa página y hacer algunas personalizaciones. ¡Los creadores de páginas también funcionan bien!
Cómo personalizar el inicio de sesión del cliente de WooCommerce
El complemento emergente de inicio de sesión/registro ofrece una forma gratuita de personalizar el inicio de sesión del cliente de WooCommerce en la interfaz. El complemento proporciona un formulario en línea y un formulario emergente para agregar a cualquier área de su sitio web. También puede reemplazar automáticamente el formulario de inicio de sesión/registro de Mi cuenta .
Para comenzar el proceso, instale y active el complemento en su sitio web de WordPress .
- Habilite el formulario de inicio de sesión/registro de WooCommerce
- Reemplazar el formulario de la página Mi cuenta
- Administrar los campos del formulario de registro/inicio de sesión
- Personaliza los estilos de la página de inicio de sesión/registro de WooCommerce
- Consulta los resultados en el frontend
- Agregue el formulario de inicio de sesión/registro de WooCommerce en cualquier lugar de su sitio
- Ver los resultados en la interfaz
1. Habilite el formulario de inicio de sesión/registro de WooCommerce
Con el complemento activo, ahora debería ver una pestaña en el panel de administración de WordPress llamada Ventana emergente de inicio de sesión/registro . Haga clic en eso para continuar.
En General , asegúrese de marcar las siguientes pestañas:
- Habilitar registro
- Usuario de inicio de sesión automático al registrarse
- Manejar Restablecer contraseña
Por lo general, todos se activan después de instalar el complemento emergente de inicio de sesión/registro, pero es una buena idea verificarlo dos veces. Hay varias otras configuraciones en esta área que es posible que también desee configurar, como elegir el rol de usuario después de que alguien se registre o agregar una página de redirección de inicio de sesión.
2. Reemplace el formulario de la página Mi cuenta
Desplácese hacia abajo hasta la sección Configuración de WooCommerce .
Active estas configuraciones si aún no están activadas:
- Reemplazar formulario de mi cuenta
- Reemplazar el formulario de inicio de sesión de pago
Esto hace que el proceso sea mucho más fácil para usted, ya que el complemento cambia automáticamente el formulario de registro/inicio de sesión predeterminado de la página Mi cuenta por uno nuevo sobre el que tiene control. Lo mismo ocurre con el formulario de inicio de sesión de pago .
3. Administrar los campos del formulario de registro/inicio de sesión
Mientras aún está en la pestaña General , vaya a la parte superior de la página. Haga clic en el enlace Administrar junto a la opción Campos de registro .
Eso lo envía a un área para personalizar los formularios de inicio de sesión y registro de WooCommerce. Puede agregar campos para contraseñas, nombres de usuario, nombres y más. Incluso hay un campo de términos y condiciones disponible.
Haga clic en los campos del lado izquierdo. Cuando haga clic en cada uno, verá la configuración de campo única.
- Marque un campo como Activo si desea incluirlo en su formulario de inicio de sesión/registro
- Personalice el campo de inicio de sesión de WooCommerce cambiando cosas como marcadores de posición, caracteres máximos y autocompletado con información de envío y facturación de WooCommerce
Asegúrese de hacer clic en el botón Guardar una vez que esté satisfecho con los campos y su configuración.
4. Personalice los estilos de la página de inicio de sesión/registro de WooCommerce
Seleccione la pestaña Configuración para abrir opciones más avanzadas para estilizar y personalizar el inicio de sesión y el registro de WooCommerce.
🗏 En esta página, puedes:
- Mostrar iconos
- Ajustar el tamaño del icono
- Cambiar el ancho del contenedor
- Cambiar el icono y los colores de fondo del icono
- Elige un color de borde
- Establecer un margen inferior para todos los campos
- Elija el color de fondo para los campos de entrada
Y siga desplazándose hacia abajo en la página, ya que hay varias otras herramientas para personalizar el área de inicio de sesión de WooCommerce.
5. Comprueba los resultados en la interfaz
Para ver sus resultados, debe cerrar sesión en su cuenta de administrador o abrir una pestaña de incógnito. Luego, vaya a la página Mi cuenta de su tienda WooCommerce. Verá un nuevo formulario de inicio de sesión de WooCommerce personalizado con los campos y estilos que haya elegido.
La pestaña Registrarse funciona como su formulario de registro, con todos los campos que elija. En este tutorial, por ejemplo, optamos por pedirles a los clientes que escriban su nombre y apellido, correo electrónico, contraseña y que acepten los términos del servicio.
6. Agregue el formulario de inicio de sesión/registro de WooCommerce en cualquier lugar de su sitio
Si lo desea, el complemento también le permite agregar el formulario de inicio de sesión a otras partes de su tienda WooCommerce.
Vuelva a la ventana emergente del formulario de inicio de sesión/registro > Configuración . Seleccione la pestaña Información . Esta página detalla cómo mostrar el formulario de inicio de sesión de WooCommerce usando varios métodos.
Puedes:
- Abra una versión emergente del formulario de inicio de sesión/registro desde el menú, usando un enlace, una clase o con un código abreviado
- Use un código abreviado para mostrar una versión en línea o emergente del formulario de inicio de sesión
Como ya vimos una versión en línea del formulario de inicio de sesión de WooCommerce, exploremos cómo mostrar el formulario emergente.
Vaya a una página, publicación o área de widgets (cualquier lugar que proporcione un editor de contenido) y agregue un bloque de código abreviado . Pegue el código abreviado del formulario emergente de la página anterior en ese bloque. Haz clic en Actualizar o Publicar para la página/publicación.
Nota: Si usa el Editor clásico de WordPress, pegue ese código abreviado en el Editor visual para que funcione.
7. Ver los resultados en la interfaz
Vaya a la versión de interfaz de su sitio web, particularmente un área donde puede ver dónde agregó ese código abreviado de inicio de sesión a una página, publicación o widget. Asegúrese de haber cerrado la sesión de su cuenta de administrador para poder ver el formulario.
Verá un enlace de inicio de sesión si trabaja con un formulario emergente. El formulario en línea simplemente muestra el formulario completo en una página.
Después de hacer clic en ese enlace, aparece una versión emergente del formulario de inicio de sesión de WooCommerce para que los clientes inicien sesión en sus cuentas. Al hacer clic en la pestaña Registrarse , se presentan campos adicionales para que los nuevos clientes creen una cuenta. También hay configuraciones para personalizar la imagen en el formulario para que coincida mejor con su marca.
Cómo agregar inicios de sesión sociales a WooCommerce
Una forma más moderna de personalizar el área de inicio de sesión de WooCommere es agregar botones de inicio de sesión social. Estos minimizan la cantidad de escritura que debe completar el cliente, ya que extrae su información actual de lugares como Facebook o Twitter para crear una cuenta en su sitio.
Similar a la personalización de la página básica de inicio de sesión de WooCommerce, hay docenas de opciones para incorporar un inicio de sesión social en su sitio de WooCommerce. Por ejemplo, el complemento emergente de inicio de sesión/registro mencionado anteriormente en este artículo en realidad proporciona un complemento de inicio de sesión social por $9 .
Sin embargo, para obtener la forma más sencilla y económica de agregar botones sociales a su inicio de sesión de WooCommerce, instale el complemento gratuito Super Socializer .
- Habilitar la función de inicio de sesión social
- Configurar redes sociales
- Habilitar inicio de sesión social para formularios de WooCommerce
- Pruebe su funcionalidad de inicio de sesión social de WooCommerce
1. Habilitar la función de inicio de sesión social
Una vez activado, encontrará una pestaña Super Socializer en el menú de administración de WordPress. Ábralo, luego seleccione la opción Inicio de sesión social .
Marque la casilla para habilitar el inicio de sesión social : se encuentra en la sección Control maestro .
2. Configurar redes sociales
En la pestaña Configuración básica , marque las redes sociales que le gustaría incluir con el inicio de sesión social. Para cada uno, también debe pegar una Clave/ID y un Secreto para activar la funcionalidad de inicio de sesión.
Desafortunadamente, cada red social tiene sus propias formas de encontrar sus ID, claves y secretos. Afortunadamente, hay íconos de signos de interrogación rojos en los que puede hacer clic para explicar los pasos para encontrar cada uno.
Por ejemplo, Facebook le permite crear rápidamente una «Aplicación», que proporciona una ID y un secreto de la aplicación. No es necesario saber nada sobre el desarrollo de las aplicaciones de Facebook: simplemente genere la aplicación (y nunca la elimine) para obtener la identificación y el secreto.
Para cada inicio de sesión social que desee, pegue el ID/Clave y el secreto nuevamente en WordPress.
Asegúrese de hacer clic en el botón Guardar en la parte inferior cuando haya terminado.
También es posible que deba agregar un enlace desde su sitio a la aplicación, pero depende de la red social: Facebook requiere este paso.
3. Habilite el inicio de sesión social para los formularios de WooCommerce
Para habilitar los botones de inicio de sesión social en WooCommerce, vaya a la pestaña Configuración avanzada en el complemento Super Socializer.
Hay cuatro casillas
- Habilitar antes del formulario de inicio de sesión del cliente de WooCommerce
- Habilitar en el formulario de inicio de sesión del cliente de WooCommerce
- Habilitar en el formulario de registro de clientes de WooCommerce
- Habilitar en la página de pago de WooCommerce
4. Pruebe su funcionalidad de inicio de sesión social de WooCommerce
Finalmente, es hora de ver cómo se ve el inicio de sesión social en la interfaz. Vaya a la página Mi cuenta en WooCommerce: ya hemos configurado los ajustes para que los botones de inicio de sesión social se agreguen a esa página.
Ahora verá todos los botones de inicio de sesión social que activó antes. Para este tutorial, solo activamos Facebook, pero hay varios otros para elegir. ¡Y cuando alguien hace clic en los botones, puede registrarse o iniciar sesión en su sitio WooCommerce con sus credenciales sociales creadas previamente!
Nota : el estilo predeterminado funciona mejor con el formulario de inicio de sesión normal de WooCommerce. Si ya personalizó la página de inicio de sesión, es posible que deba agregar un CSS personalizado para que todo se vea bien.
Otras formas de personalizar el inicio de sesión de WooCommerce
Las posibilidades son infinitas para personalizar
- Personalización del área de inicio de sesión del administrador (backend)
- Agregar un campo de autenticación de dos factores a su página de inicio de sesión
- Colocar un reCAPTCHA en la página de inicio de sesión para aumentar la seguridad
- Incluir casillas de verificación para que los clientes opten por una lista de correo electrónico al registrarse
- Implementación de un formulario de inicio de sesión/registro en el área de pago
- Incluir formularios de inicio de sesión de widgets en su encabezado, barra lateral o pie de página
- Considerando un inicio de sesión sin contraseña
- Activar un límite en el número de intentos de inicio de sesión
¿Todavía tienes alguna pregunta sobre cómo personalizar la página de inicio de sesión de WooCommerce? ¡Cuéntanos en los comentarios!
