Cómo personalizar los formularios de inicio de sesión y registro de WooCommerce

De fábrica, WooCommerce ofrece opciones de personalización limitadas para los formularios de inicio de sesión y registro. Esto dificulta que los propietarios de las tiendas brinden una buena experiencia de usuario a los clientes.

Además de esto, está limitado a los campos de pago predeterminados, lo que significa que no puede recopilar información adicional del cliente durante el pago. Esto no es ideal para las tiendas que desean dar a los clientes la opción de seleccionar fechas de reserva, ingresar varias direcciones de correo electrónico u ofrecer opciones de envoltura de regalos.

Una forma de superar esto es mediante el uso de un complemento robusto como ProfilePress que le permite administrar todo en un solo lugar. En este artículo, repasaremos cómo puede personalizar los formularios de inicio de sesión y registro de WooCommerce usando ProfilePress.

¿Por qué personalizar los formularios de inicio de sesión y registro de WooCommerce?

Personalizar los formularios de inicio de sesión y registro de WooCommerce puede ayudar a que su sitio web sea más fácil de usar y aumentar las conversiones.

Es posible que los propietarios de las tiendas deban personalizar los formularios de registro e inicio de sesión predeterminados de WooCommerce para ofrecer una experiencia personalizada a los clientes. Al crear un formulario exclusivo de inicio de sesión y registro, puede mejorar la experiencia del cliente en su sitio y maximizar los registros.

También puede agregar campos personalizados a la página de pago de su sitio de WooCommerce como una forma de recopilar información adicional del cliente antes de pagar. Por ejemplo, puede permitir que los clientes agreguen sus cuentas de redes sociales, sus nombres de usuario o muestren información adicional sobre los productos en su carrito de compras. Esto le ayuda a ofrecer una experiencia de compra más personalizada a sus clientes.

Reemplazar la página predeterminada "Mi cuenta" en WooCommerce con una personalizada es una excelente manera de hacer que su tienda se destaque. Puede permitir que los clientes inicien sesión fácilmente en sus cuentas y administren sus detalles desde un lugar centralizado. Por ejemplo, pueden iniciar sesión, registrarse y personalizar sus cuentas de usuario cargando imágenes de perfil, editando apodos o agregando una biografía.

La personalización de los formularios de inicio de sesión y registro de WooCommerce puede ayudarlo a ofrecer una experiencia de usuario mejorada en su tienda en línea.

Personalización de los formularios de inicio de sesión y registro de WooCommerce

Con ProfilePress, es fácil personalizar los formularios de inicio de sesión y registro de WooCommerce y hacer que se vean exactamente como usted quiere.

ProfilePress ofrece una solución todo en uno para crear atractivos sitios de WordPress y ofrece amplias herramientas que lo ayudan a controlar quién tiene acceso a su contenido. Puede crear perfiles de usuario intuitivos junto con atractivos formularios de registro e inicio de sesión utilizando un generador de arrastrar y soltar.

Para esto, necesitaremos un sitio de WordPress que funcione con el complemento WooCommerce instalado. También necesitaremos el complemento ProfilePress para crear formularios de inicio de sesión y registro personalizados.

Paso #1: Instalar y activar ProfilePress

Comience por obtener el complemento ProfilePress e instalarlo en su sitio de WordPress. Navegue a Complementos → Agregar nuevo usando el panel de administración de WordPress y haga clic en el botón Agregar nuevo . Cargue el archivo zip e instale el complemento en su sitio de WordPress.

Paso #2: Personalice los formularios de inicio de sesión y registro

Lo primero que debemos hacer es comenzar a crear nuestro formulario de inicio de sesión personalizado usando ProfilePress. Para hacer esto, vaya a ProfilePress → Formularios y perfiles y haga clic en el botón Agregar nuevo en la sección Iniciar sesión . Haga clic en Drag & Drop Builder y seleccione una plantilla. Para el propósito de esta demostración, hemos seleccionado la plantilla Bash .

Una vez que seleccione la plantilla, será redirigido automáticamente a la página Editar formulario . Puede agregar y soltar campos en el orden que prefiera y también editar etiquetas de campo .

También puede editar la configuración del formulario y personalizar la apariencia y las etiquetas de los botones en el formulario de inicio de sesión. Una vez que haya terminado, haga clic en el botón Guardar cambios para continuar. Ahora necesitamos crear una nueva página de WordPress y agregar el formulario de inicio de sesión personalizado a esa página usando el shortcode personalizado.

Navegue a Páginas → Agregar nuevo para crear una nueva página y agregue el código abreviado del formulario de inicio de sesión a la página. Haga clic en el botón Publicar para continuar.

Ahora, crearemos el formulario de registro y lo agregaremos a una nueva página de WordPress. Para hacer esto, vaya a ProfilePress → Formularios y perfiles y haga clic en el botón Agregar nuevo en la sección Registro .

Asigne un título a su formulario de registro y seleccione una plantilla para comenzar a personalizarlo. Hemos seleccionado la plantilla Tulipán . Se le redirigirá automáticamente a la página de edición de formulario .

Aquí, puede agregar o eliminar campos de su formulario de registro y cambiar la forma en que se ven en el front-end. Una vez que haya terminado de personalizar el formulario de registro, haga clic en el botón Guardar cambios para continuar.

Para crear una nueva página de registro de WordPress, vaya a Páginas → Agregar nuevo y pegue el código abreviado del formulario de registro. Haga clic en el botón Publicar para continuar.

Paso #3: Muestre los formularios de inicio de sesión y registro en el front-end

Dirígete a ProfilePress → Configuración y haz clic en la pestaña General . Agregue las páginas de inicio de sesión y registro personalizadas recién creadas a su tienda usando los menús desplegables y haga clic en el botón Guardar cambios para continuar.

Esto reemplazará la página de inicio de sesión predeterminada de WordPress y todos los enlaces de inicio de sesión y registro de WooCommerce con los de ProfilePress . Así es como se ve en la parte frontal de su sitio.

Paso #3.5: Reemplazo de los formularios de inicio de sesión y registro de WooCommerce

Para reemplazar los formularios de registro e inicio de sesión que se muestran en la página Mi cuenta de WooCommerce, vaya a Configuración >> WooCommerce y seleccione los formularios de registro e inicio de sesión de ProfilePress para reemplazarlos.

Los usuarios podrán registrarse para obtener una cuenta en su sitio WooCommerce utilizando el atractivo formulario de registro personalizado. Los usuarios ya registrados pueden iniciar sesión en su cuenta utilizando el formulario de inicio de sesión personalizado que creamos anteriormente:

Paso #4: Agregue campos personalizados a la página de pago

También puede agregar campos personalizados a la página de pago de su tienda WooCommerce. Para hacer esto, simplemente navegue a ProfilePress → Configuración y haga clic en la pestaña Campos personalizados .

Haga clic en el botón Agregar nuevo y configure una Etiqueta de campo para su campo personalizado. Después de configurar la clave de campo y la descripción del campo, puede configurar el tipo de campo según lo que necesite.

Puede crear texto, contraseñas, correo electrónico, teléfono, campos ocultos, número, fecha, país, carga de archivos, botones de radio, casillas de verificación, campos de área de texto y mostrarlos en la página de pago de su tienda WooCommerce.

Una vez que esté listo, haga clic en el botón Guardar cambios para continuar.

A continuación, vaya a ProfilePress → Configuración y haga clic en la pestaña WooCommerce . Agregue los campos personalizados en el cuadro de metadatos Campos de registro obligatorios y haga clic en el botón Guardar cambios para continuar.

Los usuarios podrán ver los campos personalizados en la página de registro de pago al pagar en su tienda en línea

.

Además, también queremos mostrar el formulario de inicio de sesión personalizado en la página de pago y reemplazar el predeterminado. Para hacer esto, simplemente navegue hasta ProfilePress → Configuración y haga clic en la pestaña WooCommerce .

Seleccione el formulario de inicio de sesión personalizado utilizando el menú desplegable junto a Formulario de inicio de sesión de Checkout y haga clic en el botón Guardar cambios para continuar. Esto reemplazará el formulario de inicio de sesión predeterminado en la página de pago de su sitio WooCommerce.

Bonificación: cree una página personalizada de WooCommerce "Mi cuenta"

La página "Mi cuenta" en WooCommerce permite a los visitantes del sitio acceder a su cuenta de usuario directamente desde el front-end.

ProfilePress le permite crear una página "Mi cuenta" de WooCommerce totalmente personalizada donde los usuarios pueden ver fácilmente sus cuentas de usuario y editarlas, todo desde una sola página. Para hacer esto, vaya a Profile Press → Forms & Profiles y haga clic en el botón Add New .

Asigne un nuevo nombre a su formulario de edición de perfil y seleccione una plantilla para comenzar a personalizar. Hemos seleccionado la plantilla Pinnacle . Una vez que haga clic en el botón Seleccione su plantilla , automáticamente lo redirigirá a la página de edición de formulario .

Puede agregar campos y personalizar la apariencia de su formulario en la interfaz de su sitio de WooCommerce. Una vez que haya terminado de personalizar el formulario "Mi cuenta", haga clic en el botón Guardar cambios para continuar.

Ahora que hemos creado el formulario "Mi cuenta", necesitamos crear una página de WordPress para poder mostrarla en su sitio web. Vaya a Páginas → Agregar nuevo y pegue el código abreviado Editar perfil . Haga clic en el botón Publicar una vez que haya terminado.

Y debajo hay una vista previa del formulario de perfil de edición personalizado.

O simplemente puede omitir todo el proceso y, en su lugar, usar el código abreviado ProfilePress My Account en la página creada anteriormente.

Los usuarios podrán editar la información de su cuenta y hacer clic en el botón Actualizar perfil para realizar cambios en sus cuentas de usuario directamente desde el front-end. La página serviría como la nueva página Mi cuenta.

También puede permitir que los usuarios vean sus pedidos, descargas, suscripciones y su membresía yendo a ProfilePress → Configuración. Haga clic en la pestaña WooCommerce y seleccione las pestañas para mostrar en la configuración de Pestañas de mi cuenta.

Conclusión

Personalizar los formularios de inicio de sesión y registro de WooCommerce en su sitio web es una excelente manera de mejorar la experiencia del cliente y alentar a más usuarios a registrarse con usted.

Aunque WordPress de forma predeterminada ofrece una funcionalidad de personalización limitada para las páginas de inicio de sesión y registro, puede usar un complemento sólido, como ProfilePress, para crear páginas personalizadas y mejorar la experiencia del usuario que ofrece su tienda en línea.

¿Listo para personalizar los formularios de inicio de sesión y registro de WooCommerce en su sitio web? ¡Consigue ProfilePress hoy!