Si desea brindar a los clientes una experiencia más fluida en su tienda WooCommerce, crear una página de inicio de sesión personalizada es un excelente lugar para comenzar.
La página de inicio de sesión predeterminada de WordPress se ve simple y no coincide con la marca de su tienda. Al personalizarla, puede hacer que el proceso de inicio de sesión se sienta más profesional y acorde con la marca.
En WPBeginner, hemos ayudado a muchos usuarios a configurar páginas de inicio de sesión personalizadas, y la forma más fácil es usar un constructor de páginas como SeedProd o un plugin de formularios como WPForms.
En este tutorial, le mostraré cómo diseñar una página de inicio de sesión de WooCommerce completamente personalizada y compartiré una herramienta poderosa que también puede usar para personalizar la página de inicio de sesión del pago.
¿Por qué crear una página de inicio de sesión personalizada para clientes de WooCommerce?
Personalizar las páginas de inicio de sesión de WooCommerce le permite agregar su logotipo y cambiar el diseño para que coincida con su sitio web. Esto hace que su sitio se vea más profesional y proporciona una mejor experiencia de usuario.
También le permite agregar más campos de formulario, e incluso le permite promocionar productos específicos o mostrar ofertas especiales a los clientes.
De lo contrario, cuando los clientes inicien sesión en su tienda WooCommerce, verán la página de inicio de sesión predeterminada de WordPress con solo el logotipo y la marca de WordPress.
Esta página está bien si solo desea acceder al panel de su sitio. Sin embargo, los clientes pueden desanimarse por el diseño simple y encontrar sospechoso que la página de inicio de sesión no coincida con la apariencia de su sitio web.
Dicho esto, veamos cómo puedes crear una página de inicio de sesión de cliente personalizada en WooCommerce.
Puedes usar los enlaces rápidos a continuación para saltar a diferentes métodos en nuestro tutorial:
- Método 1: Crea una página de inicio de sesión de WooCommerce completamente personalizada usando SeedProd
- Método 2: Personaliza el formulario de inicio de sesión de cliente de WooCommerce usando WPForms
- Consejo adicional: Personaliza la página de inicio de sesión del pago de WooCommerce
- Preguntas frecuentes sobre las páginas de inicio de sesión de WooCommerce
¿Qué método deberías elegir?
Este artículo cubre tres formas diferentes de personalizar tu página de inicio de sesión. Aquí tienes un resumen rápido para ayudarte a elegir la mejor para tu tienda:
- Método 1: SeedProd – Lo mejor para crear una página de inicio de sesión independiente y completamente personalizada con un diseño único que coincida con tu marca.
- Método 2: WPForms – Ideal si deseas agregar un formulario de inicio de sesión flexible a cualquier página, publicación o barra lateral de tu sitio web.
- Adicional: Personaliza el inicio de sesión del pago – La mejor opción para mejorar el formulario de inicio de sesión en la página de pago de WooCommerce para ayudar a los clientes recurrentes.
Método 1: Crea una página de inicio de sesión de WooCommerce completamente personalizada usando SeedProd
La mejor manera de crear una página de inicio de sesión de cliente personalizada de WooCommerce es usando SeedProd. Es el mejor constructor de páginas de destino y temas de WordPress para WordPress, y es increíblemente fácil de usar.
Puedes usar el constructor de arrastrar y soltar de SeedProd para personalizar el diseño y la estructura de una página o de tu tema de WordPress sin tocar una sola línea de código.
Para obtener más información, consulta nuestra revisión detallada de SeedProd.
Primero, necesitarás instalar y activar el plugin SeedProd. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
📌 Nota: Para este tutorial, usaremos la licencia SeedProd Pro porque incluye la plantilla de página de inicio de sesión y otras opciones de personalización avanzadas. También existe una versión SeedProd Lite que puedes usar gratis.
Al activarlo, verás la pantalla de bienvenida de SeedProd.
Ingresa tu clave de licencia y haz clic en el botón ‘Verificar clave’. Puedes encontrar la clave de licencia en el área de cuenta de SeedProd.
A continuación, puedes crear una página de inicio de sesión personalizada para tu tienda WooCommerce.
Simplemente dirígete a SeedProd » Landing Pages desde tu panel de WordPress y haz clic en el botón ‘Configurar una página de inicio de sesión’.
Después de eso, SeedProd te mostrará varias plantillas. Puedes seleccionar rápidamente una y personalizarla según tus necesidades. Esto ayuda a ahorrar tiempo y puedes usar un diseño existente para crear tu propia página de inicio de sesión de WooCommerce.
El plugin también te permite crear una página de inicio de sesión desde cero utilizando una plantilla en blanco.
Una vez que selecciones una plantilla, se abrirá una ventana emergente.
Continúa e ingresa un nombre para tu página y haz clic en el botón ‘Guardar y empezar a editar la página’.
A continuación, verás el constructor de páginas de arrastrar y soltar.
Ahora puedes personalizar la página de inicio de sesión agregando nuevos bloques a la plantilla desde el menú de tu izquierda.
SeedProd ofrece bloques estándar para encabezados, textos, imágenes, botones y más.
Además de esos, puedes agregar bloques avanzados como sorteos, formulario de contacto, botones para compartir en redes sociales, formulario de suscripción y más.
También hay bloques de WooCommerce como productos recientes, productos destacados y productos más vendidos que puedes agregar a tu plantilla de página de inicio de sesión.
Usando los bloques de WooCommerce, puedes recomendar fácilmente tus mejores productos y promocionar ofertas de descuento para obtener más conversiones.
Aparte de eso, SeedProd también te permite personalizar aún más cualquier sección de la página de inicio de sesión. Simplemente haz clic en la sección y verás más opciones como editar la etiqueta, el color, la fuente y el espaciado.
Una vez que hayas terminado de personalizar la página de inicio de sesión de WooCommerce, no olvides hacer clic en el botón ‘Guardar’ en la parte superior.
Después de eso, puedes ir a la pestaña ‘Configuración de página’ y hacer clic en el interruptor ‘Estado de la página’ para cambiarlo de Borrador a Publicar. Luego, puedes hacer clic en el botón ‘Guardar’ y cerrar el constructor de páginas.
A partir de aquí, todo lo que queda es hacer que tu nueva página de inicio de sesión personalizada de WooCommerce aparezca para los usuarios. Para hacer esto, ve a SeedProd » Landing Pages en tu panel de WordPress.
Simplemente haz clic en el interruptor debajo de ‘Página de inicio de sesión’ para que esté verde y diga ‘Activa’.
Una vez que eso esté activado, ¡tu nueva página de inicio de sesión aparecerá en tu sitio web de WordPress!
Puedes visitar tu tienda de comercio electrónico para verla en acción.
Método 2: Personaliza el formulario de inicio de sesión de cliente de WooCommerce usando WPForms
¿Quieres crear un formulario de inicio de sesión que también coincida con el tema de tu sitio web y ofrezca más campos en el formulario?
El formulario de inicio de sesión predeterminado de WordPress solo permite a los usuarios ingresar su dirección de correo electrónico o nombre de usuario junto con una contraseña.
El principal beneficio de usar un plugin de formularios es la flexibilidad. Te permite colocar tu formulario de inicio de sesión en cualquier lugar de tu tienda en línea, como en una barra lateral o en una página de producto, lo que lo hace conveniente para los clientes.
La mejor manera de hacerlo es usando WPForms. Es el mejor constructor de formularios de WordPress que es fácil de usar para principiantes. Más de 6 millones de sitios web utilizan WPForms para crear formularios más inteligentes.
En WPBeginner, lo hemos utilizado para crear formularios de contacto y encuestas anuales, y nos encanta. Para obtener más información, consulta nuestra reseña completa de WPForms.
Puedes crear fácilmente un formulario de inicio de sesión personalizado de WooCommerce y mostrarlo en cualquier lugar de tu tienda en línea, como la barra lateral o la página de producto.
Primero, necesitarás instalar y activar el plugin WPForms. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
📌 Nota: Para este tutorial, usaremos el plan WPForms Pro porque incluye el complemento de Registro de Usuarios. También puedes probar la versión gratuita de WPForms para empezar.
Tras la activación, puedes ir a WPForms » Ajustes desde tu panel de WordPress e introducir la clave de licencia. Puedes encontrar la clave de licencia en el área de cuenta de WPForms.
A continuación, deberá dirigirse a WPForms » Complementos en el panel de administración de WordPress.
Después de eso, desplácese hacia abajo hasta el 'Complemento de registro de usuarios' y luego haga clic en el botón 'Instalar complemento'.
Ahora, está listo para crear un formulario de inicio de sesión personalizado para WooCommerce. Simplemente vaya a WPForms » Agregar nuevo para iniciar el constructor de formularios.
En la siguiente pantalla, puede ingresar un nombre para su formulario en la parte superior. Luego, busque la plantilla 'Formulario de inicio de sesión de usuario' y haga clic en el botón 'Usar plantilla'.
Después de eso, puede personalizar su plantilla de formulario de inicio de sesión de usuario utilizando el constructor de arrastrar y soltar. WPForms hace que sea muy fácil agregar diferentes campos al formulario o reorganizar los campos existentes en la plantilla.
Por ejemplo, puede agregar campos avanzados como números de teléfono arrastrándolos desde el menú de su izquierda y soltándolos en la plantilla.
Puede personalizar aún más cada campo del formulario en la plantilla. Simplemente haga clic en cualquier campo y edite su etiqueta, agregue una descripción y conviértalo en un campo obligatorio en el formulario.
Después de eso, puede dirigirse a la pestaña 'Configuración' en el constructor de formularios. En la configuración general, puede cambiar el 'Texto del botón de envío' a 'Iniciar sesión'.
A continuación, puede ir a la pestaña 'Confirmaciones' para cambiar lo que sucederá cuando un usuario inicie sesión correctamente.
Simplemente haga clic en el menú desplegable 'Tipo de confirmación' y seleccione una opción. Puede mostrar a los clientes un mensaje, mostrar una página o redirigirlos a una URL específica.
Por ejemplo, puede agregar su formulario de inicio de sesión de WooCommerce a una página de producto y permitir que los clientes inicien sesión rápidamente para comprar su producto.
Cuando haya terminado, simplemente haga clic en el botón 'Guardar' en la parte superior.
A continuación, deberá agregar el formulario de inicio de sesión del cliente de WooCommerce a una página de su sitio.
Simplemente haga clic en el botón 'Incrustar' en la parte superior del constructor. Luego puede elegir si colocará el formulario en una página existente o creará una nueva para él.
Usemos la opción 'Crear nueva página' por ahora.
A continuación, deberá ingresar un nombre para su página y hacer clic en el botón '¡Vamos!'.
Después de eso, verás el formulario de inicio de sesión de WPForms dentro del área de contenido de WordPress.
Desde aquí, puedes personalizar y dar estilo a tu formulario de inicio de sesión abriendo el panel de bloques en el lado derecho de la pantalla. En la sección 'Temas', puedes elegir entre más de 40 temas prediseñados para darle a tu formulario de inicio de sesión un aspecto único.
También puedes cambiar el estilo y el tamaño de los campos del formulario, las etiquetas, los botones y más.
Una vez que estés satisfecho con el diseño, puedes previsualizar tu formulario, publicar la nueva página y mostrar el inicio de sesión personalizado de WooCommerce para tus clientes.
También puedes agregar tu formulario de inicio de sesión de WooCommerce a la barra lateral de tu tienda. De esta manera, tu formulario aparecerá en cada página de producto y permitirá a los clientes iniciar sesión rápidamente.
Simplemente dirígete a Apariencia » Widgets desde tu panel de WordPress. Luego, haz clic en el botón '+' y agrega un bloque de widget de WPForms.
Después de eso, puedes elegir tu formulario de inicio de sesión del menú desplegable e ingresar un título.
Cuando hayas terminado, haz clic en el botón 'Actualizar'.
Ahora puedes visitar tu tienda en línea para ver el formulario de inicio de sesión en la barra lateral.
Para más formas de crear una página de inicio de sesión de cliente de WooCommerce personalizada, puedes consultar nuestra guía sobre cómo crear una página de inicio de sesión personalizada de WordPress.
Además, también puedes ver nuestro tutorial sobre cómo agregar un menú de navegación en WordPress para que puedas agregar tu página de inicio de sesión de WooCommerce a la navegación de tu sitio web.
Consejo adicional: Personaliza la página de inicio de sesión del pago de WooCommerce
WooCommerce permite a los visitantes recurrentes iniciar sesión durante la página de pago. Sin embargo, un formulario de inicio de sesión genérico o torpe en la página de pago puede interrumpir el proceso de compra y generar ventas perdidas.
Al crear una experiencia de inicio de sesión fluida y con marca en este paso crítico, puede reducir el abandono del carrito y generar más confianza con sus clientes.
La mejor manera de hacerlo es utilizando un potente plugin constructor de embudos como FunnelKit.
Viene con plantillas diseñadas profesionalmente que reemplazan la página de pago predeterminada, brindando a los clientes recurrentes una experiencia de inicio de sesión mucho mejor y más fácil. Esto ayuda a reducir la fricción y hace que sea más probable que completen sus compras.
También tienes la opción de probar A/B los múltiples embudos, páginas de ventas y ofertas de venta adicional.
FunnelKit te brinda análisis detallados de cada paso de tu embudo de WooCommerce.
También viene con un potente complemento de automatización de marketing, FunnelKit Automations.
Te permite personalizar correos electrónicos de WooCommerce, enviar notificaciones por correo electrónico en cascada en WooCommerce para abandono de carrito, series de bienvenida y más.
Si te tomas en serio el crecimiento de tu tienda WooCommerce, esta es una de las herramientas imprescindibles que recomendamos.
Preguntas frecuentes sobre las páginas de inicio de sesión de WooCommerce
Aquí hay algunas preguntas que nuestros lectores hacen con frecuencia sobre la creación de páginas de inicio de sesión de WooCommerce en WordPress:
¿Puedo usar estas páginas de inicio de sesión personalizadas para usuarios regulares de WordPress también?
Sí, absolutamente. El método que utiliza SeedProd reemplaza la página de inicio de sesión predeterminada de WordPress para todos los usuarios, incluidos administradores y editores. El método WPForms te permite colocar un formulario de inicio de sesión en cualquier lugar, que también puede ser utilizado por cualquier rol de usuario.
¿Necesito saber programar para personalizar mi página de inicio de sesión?
En absoluto. Tanto SeedProd como WPForms están diseñados para ser fáciles de usar con constructores de arrastrar y soltar. Puedes crear una página de inicio de sesión de aspecto profesional sin tocar una sola línea de código.
¿Es gratis crear una página de inicio de sesión personalizada de WooCommerce?
Ambos plugins ofrecen versiones gratuitas para empezar. Sin embargo, para acceder a las plantillas específicas de página de inicio de sesión y a las funciones avanzadas que se muestran en este tutorial, necesitarás las versiones Pro de SeedProd o WPForms.
¿Qué método es mejor para mi tienda, SeedProd o WPForms?
Depende de tus necesidades específicas. SeedProd es ideal si quieres crear una página de inicio de sesión completamente separada y con un diseño completo que coincida perfectamente con tu marca.
Por otro lado, WPForms es mejor si quieres un formulario de inicio de sesión flexible que puedas añadir en varios lugares de tu sitio, como una barra lateral o una página de pago.
Esperamos que este artículo te haya ayudado a aprender cómo crear una página de inicio de sesión personalizada para clientes de WooCommerce. También puedes ver nuestra selección experta de los mejores plugins de WooCommerce y nuestra guía sobre cómo limitar los intentos de inicio de sesión en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Siempre me he adherido a la regla de que los grandes sitios web se componen de detalles. Sí, la página de inicio de sesión predeterminada de WooCommerce funciona perfectamente, pero es poco atractiva y, diría yo, bastante aburrida. SeedProd añade una dimensión completamente nueva, y es increíblemente fácil de usar con una guía tan detallada a mano. Como mencioné, son estos detalles, como una página de inicio de sesión personalizada, los que convierten una tienda ordinaria en una buena y una buena en una excelente. Gracias por el consejo.
Dennis Muthomi
Thank you for showing the SeedProd method
I like how SeedProd allows adding custom blocks and sections to match my branding.
I have one clarifying question – when I use SeedProd to create the custom customer login page, will it also replace the default admin login, or will the admin login page remain unchanged?
Soporte de WPBeginner
Sí, reemplazaría tu inicio de sesión normal así como tu inicio de sesión de la tienda.
Administrador