Ahora puedes personalizar tu página de inicio de sesión de WooCommerce sin código. Inicio de sesión personalizado para WooCommerce, nuevo de Visser Labs, ofrece a los clientes recurrentes una página de marca en /login con cinco plantillas, tu logo y un panel promocional junto al formulario.
La mayoría de las tiendas nunca tocan su pantalla de inicio de sesión. WooCommerce muestra un formulario básico de nombre de usuario y contraseña en la página Mi cuenta, estilizado por el tema que utilices. Funciona, pero parece una ocurrencia tardía, y es la única página que tus clientes habituales ven cada vez que regresan.
Inicio de sesión personalizado para WooCommerce soluciona eso. A continuación, cubrimos por qué el inicio de sesión predeterminado se queda corto, qué hace el plugin, las cinco plantillas, cómo usar el panel promocional y cómo configurarlo todo en unos minutos.
Tabla de Contenidos
- Por qué la página de inicio de sesión predeterminada de WooCommerce se queda corta
- Lo que hace Inicio de sesión personalizado para WooCommerce
- Cinco plantillas para tu página de inicio de sesión de WooCommerce
- Convierte tu página de inicio de sesión en un espacio promocional
- Cómo personalizar tu página de inicio de sesión de WooCommerce
- Cómo funcionan los inicios de sesión y las redirecciones
- Para desarrolladores: Hooks y filtros
- Precios y requisitos
- Ofrece una mejor bienvenida a los clientes recurrentes
- Preguntas Frecuentes
Por qué la página de inicio de sesión predeterminada de WooCommerce se queda corta
El inicio de sesión predeterminado de WooCommerce es un formulario funcional sin marca ni mensajes propios. Se encuentra dentro de la plantilla Mi cuenta de tu tema, por lo que cambiar su apariencia generalmente significa editar archivos del tema o escribir CSS.
Las personas que inician sesión son tus clientes existentes, el grupo con mayor probabilidad de volver a comprar. Nuestra guía sobre los beneficios de la retención de clientes explica por qué esa audiencia merece un cuidado extra.
Iniciar sesión también es un punto donde los compradores abandonan. Según el Baymard Institute, los problemas de restablecimiento de contraseña hicieron que algunos usuarios con cuentas existentes abandonaran el proceso de pago en sitios minoristas durante sus pruebas. Una página de inicio de sesión enfocada con un enlace visible de "¿Olvidaste tu contraseña?" ofrece a esos clientes una forma clara de volver a entrar.
Otro problema es el espacio desperdiciado. Una página de inicio de sesión recibe tráfico constante de personas que ya confían en ti, y el formulario predeterminado no utiliza nada de eso para informarles sobre una oferta, un producto nuevo o una oferta de fidelización. Si has leído nuestras estrategias para reducir el abandono del carrito, sabes cuánto cuenta cada pequeño paso en el camino de compra.
Lo que hace Inicio de sesión personalizado para WooCommerce
Custom Login for WooCommerce crea una página de inicio de sesión independiente en /login y redirige a los compradores que no han iniciado sesión desde Mi cuenta a ella. Tú controlas el diseño, el logotipo, los colores, el texto y un panel promocional desde una única pantalla de configuración en WooCommerce.
Esto es lo que se incluye en la versión 1.0.3:
- Página /login automática: Al activar el plugin se crea una página de Inicio de sesión en /login si tu sitio aún no tiene una.
- Redirección de Mi cuenta: Los visitantes que no han iniciado sesión y que abren Mi cuenta son redirigidos a /login, y luego devueltos a Mi cuenta después de iniciar sesión.
- Cinco plantillas: Split Clásico, Tarjeta Centrada, Moderno Degradado, Modo Oscuro y Orgánico Cálido.
- Controles de marca: Añade tu logotipo, cambia el encabezado y establece los colores para paneles, botones, enlaces y campos de entrada.
- Etiquetas de formulario editables: Renombra las etiquetas de correo electrónico y contraseña, el texto de "Recuérdame", el botón de inicio de sesión y el enlace de "contraseña olvidada".
- Panel promocional: Muestra un encabezado, un mensaje corto y un botón de llamada a la acción junto al formulario de inicio de sesión.
- Contenido rotativo: Añade varios mensajes promocionales y muestra uno aleatorio en cada visita.
- Control móvil: Oculta el panel promocional en teléfonos o apílalo debajo del formulario de inicio de sesión.
También declara compatibilidad con Almacenamiento de Pedidos de Alto Rendimiento. WooCommerce describe HPOS como una estructura de base de datos construida específicamente para datos de pedidos de comercio electrónico, según la documentación de HPOS de WooCommerce. Las tiendas que han cambiado a ella no verán una advertencia de compatibilidad para Custom Login for WooCommerce.
Cinco plantillas para tu página de inicio de sesión de WooCommerce
Cada plantilla es un diseño completo de página de inicio de sesión, y puedes cambiar entre ellas con un solo clic en la pestaña Plantilla. Tu logotipo, encabezado y etiquetas se mantienen, por lo que probar un aspecto diferente lleva segundos. Tarjeta Centrada muestra el formulario de inicio de sesión por sí solo, sin el panel promocional, así que elige una de las otras cuatro si deseas mostrar una oferta.
| Plantilla | Cómo se ve |
|---|---|
| Split Clásico | Formulario de inicio de sesión blanco y limpio en un lado, sección promocional de color en el otro |
| Tarjeta Centrada | Una única tarjeta de inicio de sesión sobre un fondo oscuro, sin el panel promocional |
| Gradiente Moderno | Un fondo de gradiente brillante con una tarjeta blanca flotante |
| Modo Oscuro | Un tema oscuro con colores de acento |
| Orgánico Cálido | Tonos cálidos y formas redondeadas para una sensación amigable |
Classic Split es el diseño que usamos en la tienda de Visser Labs. Algunas plantillas conservan más de su propio esquema de color que otras, así que previsualiza los colores de tu pestaña Diseño en la plantilla que elijas. Si quieres que tu página de inicio de sesión coincida exactamente con los colores de tu marca, Classic Split es un buen punto de partida.
Aquí tienes cómo se ve cada plantilla con una marca de tienda de ejemplo. Construimos estas cinco tiendas de ejemplo en nuestro sitio de prueba, una por plantilla, para que puedas ver el rango antes de elegir.
Convierte tu página de inicio de sesión en un espacio promocional
El panel promocional pone una oferta delante de cada cliente que inicia sesión. Muestra un encabezado, un mensaje corto y un botón que enlaza a donde quieras, justo al lado del formulario de inicio de sesión que tus clientes ya están mirando.
Lo configuras en la pestaña Contenido. Activa Habilitar sección de promoción y luego rellena cuatro campos:
- Encabezado de la promoción: El titular del panel.
- Contenido de la promoción: Una o dos frases de texto de apoyo.
- Texto del botón: La etiqueta del botón de llamada a la acción.
- URL del botón: A dónde va el botón. Se abre en una nueva pestaña, por lo que la página de inicio de sesión del cliente permanece abierta.
Mostrando un mensaje diferente en cada visita
El contenido rotativo te permite ejecutar varias promociones a la vez. Activa Habilitar rotación, haz clic en Añadir elemento y dale a cada elemento su propio Encabezado, Contenido, Texto del botón, URL del botón y URL de la imagen. Custom Login para WooCommerce luego elige un elemento al azar cada vez que se carga la página.
Esto funciona bien para tiendas con más de una cosa que decir. Un elemento podría promocionar una venta de temporada, otro una nueva gama de productos y un tercero la suscripción a tu boletín.
Lo que hemos visto: En nuestra propia página de inicio de sesión de Visser Labs, el panel promocional no anuncia ningún plugin de Visser en absoluto. Rota ofertas para nuestros plugins hermanos, como SaveTo Wishlist y Advanced Coupons, y la oferta de SaveTo Wishlist lleva un enlace rastreado para que podamos ver sus clics. Una página de inicio de sesión es un buen lugar para vender cruzadamente algo relacionado, porque las personas que la leen ya tienen una cuenta contigo. Nuestro artículo sobre cómo aumentar las ventas con SaveTo Wishlist Pro cubre por qué una oferta de lista de deseos es adecuada para clientes que regresan.
Elegir cómo se ve la promoción en el móvil
Los teléfonos no tienen espacio para dos paneles uno al lado del otro, por lo que la pestaña Diseño tiene una opción Mostrar promoción en móvil con dos alternativas. Ocultar en móvil muestra solo el formulario de inicio de sesión en pantallas pequeñas y es la opción predeterminada. Apilar debajo del formulario de inicio de sesión mantiene la promoción visible debajo.
Elige Apilar debajo del formulario de inicio de sesión si tu promoción tiene una oferta real. Conserva la opción predeterminada si el panel es principalmente decorativo.
Cómo personalizar tu página de inicio de sesión de WooCommerce
Para personalizar tu página de inicio de sesión de WooCommerce, trabajas a través de cuatro pestañas y un botón Guardar. Todo se encuentra en WooCommerce > Inicio de sesión personalizado.
- Instala y activa el plugin. Sube Inicio de sesión personalizado para WooCommerce desde Plugins > Añadir nuevo, y luego actívalo. Tu página /login se crea automáticamente.
- Activa tu licencia. Abre la pestaña Licencia, introduce tu Clave de licencia y el Correo electrónico de activación que usaste al comprar, y activa. Una licencia activa te da actualizaciones del plugin y soporte.
- Elige una plantilla. En la pestaña Plantilla, haz clic en el diseño que desees.
- Personalízalo con tu marca. En la pestaña Diseño, pega la dirección de tu logo en URL del logo (se admiten SVG, PNG y JPG, y se recomiendan 200x60px), luego establece tu Encabezado de inicio de sesión.
- Establece colores y etiquetas. Todavía en la pestaña Diseño, ajusta los Colores del panel, Colores del botón, Colores del botón de promoción, Colores de los enlaces y Colores de los campos, luego renombra cualquier Etiqueta del formulario que desees cambiar.
- Añade tu promoción. En la pestaña Contenido, rellena el panel de promoción o activa el contenido rotatorio.
- Guardar. Haz clic en Guardar ajustes en la parte superior de la pantalla de configuración, luego abre tucasa.com/login en una ventana privada del navegador para comprobar el resultado.
Usa una ventana privada para esa última comprobación. Los usuarios que hayan iniciado sesión y visiten /login son enviados directamente a Mi cuenta, por lo que no verás la página de inicio de sesión mientras hayas iniciado sesión como administrador.
Cómo funcionan los inicios de sesión y las redirecciones
Inicio de sesión personalizado para WooCommerce utiliza el propio flujo de inicio de sesión de WooCommerce, por lo que las cuentas, contraseñas e historial de pedidos de tus clientes permanecen iguales. Solo la página en la que inician sesión es nueva.
Algunos detalles merecen ser conocidos:
- Iniciar sesión con nombre de usuario o correo electrónico: El campo de inicio de sesión acepta cualquiera de los dos, al igual que WordPress estándar.
- De vuelta a donde empezaron: Cuando un comprador es enviado desde Mi cuenta a /login, regresa a Mi cuenta después de iniciar sesión.
- Los restablecimientos de contraseña siguen funcionando: El enlace "¿Olvidaste tu contraseña?" dirige a la página normal de recuperación de contraseña de WooCommerce, y esa página nunca se redirige.
- El cierre de sesión aterriza en /login: Después de cerrar sesión, los clientes regresan a tu página de inicio de sesión con un mensaje de confirmación.
- Un mensaje de error: Una contraseña incorrecta y un nombre de usuario desconocido muestran el mismo mensaje, "Nombre de usuario desconocido o contraseña incorrecta". Esto evita que alguien use el formulario para comprobar qué cuentas existen.
El formulario de inicio de sesión también ejecuta los ganchos del formulario de inicio de sesión estándar de WooCommerce. Las extensiones que agregan campos al formulario de inicio de sesión de WooCommerce, como los plugins CAPTCHA, también pueden agregarlos a tu nueva página. Si los bots son un problema para tu tienda, nuestra guía sobre cómo prevenir pedidos falsos en WooCommerce cubre el panorama general.
Para desarrolladores: Hooks y filtros
Los desarrolladores pueden cambiar el comportamiento de Custom Login for WooCommerce con dos filtros y tres acciones. Estas son la forma admitida de personalizarlo sin editar los archivos del plugin.
clwc_login_redirect: Cambia a dónde va un cliente después de un inicio de sesión exitoso. Recibe la URL de redirección y el usuario.clwc_logout_redirect: Cambia a dónde va un cliente después de cerrar sesión.clwc_after_login_form: Se ejecuta después del formulario de inicio de sesión, para enlaces o avisos adicionales.clwc_login_footer: Se ejecuta en el pie de página de la página de inicio de sesión.clwc_login_enqueue_scripts: Encola scripts o estilos para la página de inicio de sesión. La página no disparawp_enqueue_scripts, así que usa esta acción en su lugar.
La redirección después del inicio de sesión también pasa por el filtro woocommerce_login_redirect de WooCommerce, por lo que el código de redirección existente sigue funcionando.
Precios y requisitos
Custom Login for WooCommerce se vende como una licencia anual; consulta la página del plugin para ver los precios actuales. Esto incluye actualizaciones automáticas y soporte, y está cubierto por la garantía de devolución de dinero de 14 días de Visser Labs.
Tu tienda necesita:
- WordPress 5.8 o superior
- PHP 7.4 o superior
- WooCommerce 6.0 o superior
Ofrece una mejor bienvenida a los clientes recurrentes
Tu página de inicio de sesión es una de las pocas páginas que la gente visita a propósito, una y otra vez. Cuando personalizas tu página de inicio de sesión de WooCommerce, esa visita se convierte en un momento de marca, y el panel promocional te da un lugar para mostrar a los clientes recurrentes las novedades.
- Comprueba por qué el inicio de sesión predeterminado no es suficiente para tu tienda
- Elige una de las cinco plantillas que se adapte a tu marca
- Configura el panel promocional con una oferta para clientes recurrentes
- Sigue los pasos de configuración y prueba en una ventana privada
¿Listo para personalizar tu página de inicio de sesión de WooCommerce? Obtén Custom Login for WooCommerce y ofrece a tus clientes recurrentes una página de inicio de sesión que se parezca a tu tienda.
Preguntas Frecuentes
¿Qué es una página de inicio de sesión personalizada de WooCommerce?
Una página de inicio de sesión personalizada de WooCommerce es una página de inicio de sesión dedicada con tu propio diseño, en lugar del formulario predeterminado en la página Mi cuenta. Inicio de sesión personalizado para WooCommerce crea una en /login con tu elección de cinco plantillas, tu logo, colores personalizados y un panel promocional opcional.
¿Necesitarán mis clientes nuevas contraseñas?
No. Inicio de sesión personalizado para WooCommerce utiliza el inicio de sesión estándar de WordPress y WooCommerce, por lo que todas las cuentas existentes, contraseñas e historial de pedidos permanecen como están. Los clientes inician sesión con los mismos detalles en la nueva página.
¿Cambia Inicio de Sesión Personalizado para WooCommerce el inicio de sesión del administrador de WordPress?
No. Maneja el inicio de sesión del cliente en /login y la redirección desde Mi Cuenta. La pantalla de inicio de sesión de tu wp-admin no se modifica.
¿Puedo mostrar diferentes promociones en mi página de inicio de sesión?
Sí. Activa el contenido rotatorio en la pestaña Contenido y agrega tantos elementos como desees. Cada elemento tiene su propio encabezado, texto, botón e imagen, y Inicio de sesión personalizado para WooCommerce muestra uno al azar en cada visita.
¿Funciona con HPOS?
Sí. La versión 1.0.3 declara compatibilidad con WooCommerce High-Performance Order Storage, por lo que las tiendas que usan HPOS no verán una advertencia de compatibilidad.
¿Qué sucede si un cliente conectado visita /login?
Se les envía directamente a su página de Mi Cuenta. El formulario de inicio de sesión solo aparece para los visitantes que no han iniciado sesión.
