Cómo hacer una página personalizada de Mi cuenta de WooCommerce
Publicado: 2022-04-14Si tiene una tienda en línea con el complemento WooCommerce, probablemente esté familiarizado con la página Mi cuenta. Esta es la página que ven sus clientes cuando inician sesión en su cuenta.
Por defecto, esta página es bastante básica, como esta.
Hay mucho más potencial y mucho más que puedes hacer con esta parte tan importante de tu tienda de comercio electrónico.
Puedes personalizarlo para incluir mucha más información y características interesantes para mejorar la experiencia del usuario.
¡Le mostraremos cómo personalizar la página Mi cuenta de WooCommerce y brindarles a sus clientes una experiencia mucho mejor!
Al seguir estos pasos, podrá crear una página de Mi cuenta de aspecto profesional como la que se muestra a continuación.
¿Listo? ¡Empecemos!
¿Por qué personalizar la página Mi cuenta en WooCommerce?
La página Mi cuenta es el panel de control de su usuario para administrar sus pedidos, verificar las descargas, editar su dirección y editar los detalles de su cuenta.
Una página Mi cuenta bien diseñada puede brindar una mejor experiencia de usuario a sus clientes.
Además de ser agradable a la vista (¿a quién no le gustan las cosas bonitas?), este diseño hace que administrar las cuentas sea mucho más conveniente.
Aquí hay algunas razones por las que es vital crear una excelente página de Mi cuenta:
Mejor satisfacción del cliente
Si puede proporcionar a sus clientes toda la información que necesitan en la página Mi cuenta, es menos probable que se comuniquen con usted para obtener ayuda.
Una página Mi cuenta bien personalizada hará que sus clientes se sientan más cómodos y seguros al comprar en su tienda.
Mejor retención de clientes
Personalizar la página Mi cuenta también puede ayudar a retener a los clientes.
Si facilita el acceso a la información de su cuenta y al historial de pedidos, es más probable que continúen comprando con usted.
Un cliente satisfecho tiene más probabilidades de volver.
Reducción de devoluciones de productos
Cuando mejora la página Mi cuenta, ayuda a los clientes a obtener toda la información que necesitan sobre el producto, incluidos los detalles de envío, la información de seguimiento y más.
Con toda esta información en un solo lugar, en una interfaz fácil de usar, los clientes no tendrán que preocuparse por el cumplimiento del producto.
Cuando tranquiliza a sus clientes, tienen una experiencia mucho más positiva, lo que puede resultar en una repetición de la costumbre.
Cómo personalizar la página Mi cuenta
Ahora que conocemos los beneficios y cómo se pueden aplicar a su negocio, agreguemos esos cambios de diseño a su página Mi cuenta.
Personalice su página Mi cuenta manualmente
Para este método, primero, instalaremos todos los complementos y temas necesarios; a continuación, diseñaremos el panel de Mi cuenta y finalmente ocultaremos la navegación predeterminada de WooCommerce.
Importante : copie cada enlace de su página Mi cuenta actual y guárdelo en un documento separado.
Esto va a ser útil en pasos futuros.
Paso 1: instale los complementos necesarios
Puede usar el creador de páginas de WordPress que prefiera.
Usamos Ultimate Addons para Gutenberg (UAG) para este diseño.
UAG es un complemento liviano que agrega fantásticos diseños y bloques de diseño a la biblioteca de Gutenberg.
Es compatible con todos los temas y se puede descargar completamente gratis.
También necesitará otro complemento llamado Gutenberg Blocks Library & Toolkit – Editor Plus.
Este complemento le permite agregar CSS personalizado a bloques individuales de Gutenberg. Necesitaremos este complemento en el paso 3.
Ambos complementos están disponibles en la biblioteca de complementos de WordPress y puede descargarlos de forma gratuita.
Paso 2: Diseñe su tablero
Una vez que haya descargado los complementos que desea, es hora de personalizar la página Mi cuenta de WooCommerce.
1. Vaya a Páginas > Mi cuenta desde su panel de WordPress.
2. Haga clic en Editar para comenzar a editar la página.
Verá el código abreviado predeterminado de mi cuenta agregado allí. Este shortcode le permite a WordPress saber que la página es la página Mi cuenta.
3. Por ahora, copie el shortcode en otro documento y elimine el bloque. Lo necesitaremos, pero no ahora.
4. En la columna, agregue un bloque de cuadro de información .
5. Desde la barra lateral derecha, use la configuración del bloque para personalizar el bloque.
Aquí establezca la posición del icono como Left Of Text And Title y establezca la alineación vertical en Middle .
6. También puede optar por habilitar o deshabilitar el título y el separador de la barra lateral.
Aquí estamos deshabilitando el título y el separador.
Puede hacerlo desactivando el botón de alternar junto a la opción Habilitar título .
Para deshabilitar el separador, seleccione Ninguno en la opción Estilo en Separador .
7. Finalmente, ve a la sección CTA y configura el Tipo de CTA como un cuadro completo.
8. A continuación, vaya a la vista de lista desde la parte superior y seleccione y duplique la columna hasta que tenga 6 de ellas.
Agregue el contenido necesario en el espacio editable y su página debería verse así.
9. Ahora es el momento de agregar los enlaces correctos a cada cuadro.
De esta manera, cada cuadro de icono se activa y envía a su cliente a la página respectiva.
10. Cambie los íconos en cada uno de los cuadros de íconos a algo relacionado con el título.
Para ello, seleccione un cuadro de icono , vaya a Configuración de iconos y busque el icono más cercano al título.
Finalmente, haga clic en el icono en el cuadro de iconos.
11. Podemos agregar algunos bordes para crear una separación entre los cuadros de iconos.
- Vaya a Vista de lista y seleccione una columna.
- Desde la barra lateral derecha, vaya a Configuración de borde y agregue algo de grosor a la configuración. En este caso, agregamos 2 px.
- Vaya a Radio del borde y cambie el radio si lo desea. Hemos agregado un radio del 5% para agregar una ligera curvatura en este caso.
12. Finalmente, agregue WooCommerce My Account Shortcode .
- Haga clic en el botón "+".
- Seleccione la opción Código corto .
- Pegue el código corto de Mi cuenta de WooCommerce en la barra que aparece.
Una vez que agregue el código abreviado, notará que el antiguo panel de Mi cuenta de WooCommerce vuelve a aparecer debajo de su diseño actual.
Simplemente podemos ocultar eso usando el código CSS que cubriremos en el siguiente paso.
Paso 3: ocultar la navegación de la página Mi cuenta de WooCommerce
Para este paso, deberá agregar un pequeño fragmento de CSS a su sitio web.
- Vaya a la vista en vivo.
- Seleccione la columna que desea ocultar. En este caso, la columna shortcode.
- En la barra lateral derecha, ve a la configuración de CSS personalizado .
- Pegue el siguiente CSS personalizado:
.woocommerce-MyAccount-navigation { display:none; } .woocommerce-account .woocommerce-MyAccount-content { width: 100%; } 
¡Con esta configuración en su lugar, su página Mi cuenta ahora se verá mucho mejor!
Paso 4: cambie la configuración de visibilidad de su página
Ahora, la página Mi cuenta se ve mejor que la versión predeterminada. El único problema es que incluso los usuarios que han cerrado la sesión verán el mismo formato.
Así es como se ve cuando un usuario que no ha iniciado sesión visita la página Mi cuenta de WooCommerce.
No es así como queremos que funcione la página. Solo queremos que esos elementos sean visibles para los usuarios registrados.
- Seleccione la columna que desea mantener oculta de los usuarios que no han iniciado sesión en la vista de lista. En este caso, seleccione las columnas que contienen cuadros de iconos.
- En Configuración derecha, barra lateral, vaya a Configuración de bloque > Avanzado.
- Establezca las Condiciones de visualización en Estado de usuario.
- Active la opción Ocultar de los usuarios que han cerrado la sesión .
- Hazlo para ambas columnas.
Complementos de WordPress para personalizar la página Mi cuenta de WooCommerce
Ahora, si no quiere hacer todo el trabajo usted mismo, aquí hay 3 complementos que pueden ayudar.
Páginas de cuenta de WooCommerce por Iconic WP
WooCommerce Account Page by IconicWP plugin es uno de los complementos más perfectos para WooCommerce y funciona bien en todos los temas populares de WordPress.
Con este complemento, puede agregar su contenido personalizado en la página Mi cuenta. También puede agregar tantas páginas personalizadas en el área Mi cuenta como desee.
YITH WooCommerce Personalizar la página de mi cuenta
La página Personalizar mi cuenta de YITH WooCommerce viene con un montón de opciones de personalización.
Garantiza que los clientes puedan ver lo que necesitan en la sección Mi cuenta de su sitio web. Con opciones de menú ilimitadas, tiene mucho espacio para instrucciones y notificaciones, puede brindar una sólida experiencia al cliente.
También puede agregar contenido personalizado como encuestas, instrucciones, cupones, notificaciones y videos.
Personalizar la página de mi cuenta por ThemeGrill
Personalizar la página de mi cuenta de ThemeGrill está disponible en el directorio oficial de complementos de WooCommerce.
Con este complemento, puede crear impresionantes páginas de 'Mi cuenta' a medida que personaliza el tamaño de fuente, el color y el fondo. Además, hay muchas opciones para agregar información como direcciones o métodos de pago.
Puede diseñar la página como mejor le parezca y combinarla con la marca general de su sitio web.
Personalice su página WooCommerce Mi cuenta hoy
¡Eso es todo lo que necesita hacer para personalizar la página Mi cuenta de WooCommerce!
Este método funciona con todos los temas y en todos los creadores de páginas. Aquí hay un video donde personalizamos la página Mi cuenta de WooCommerce con Elementor.
Si tiene alguna pregunta o comentario, no dude en dejarlos en la sección de comentarios a continuación, y nos pondremos en contacto con usted lo antes posible.