Cómo personalizar la página “Mi cuenta” de WooCommerce

Si una de las prioridades de cualquier ecommerce debe ser la personalización para el cliente de la tienda, una de las páginas fundamentales es la de “Mi cuenta“, donde tendrá sus pedidos, datos, etc.

Así que es fundamental que esta página sea un espacio único, personalizado, donde encuentre toda la información fácilmente.

La página “Mi cuenta” por defecto

La página que WooCommerce crea por defecto para la cuenta de cliente contiene enlaces a las principales secciones, o variables, de su cuenta:

  • Escritorio
  • Pedidos
  • Descargas
  • Datos de la cuenta
  • Direcciones
  • Métodos de pago

Y ya, lo único que identifica esta página es que los pedidos sean los del cliente, poco más, así que es muy susceptible de modificar y, sobre todo, mejorar.

Cómo personalizar la página “Mi cuenta” sin códigos ni plugins

Un modo básico pero interesante con el que puedes personalizar esta página es simplemente abriéndola para editarla y añadirle, antes o después del shortcode que muestra las variables, lo que quieras.

Puedes añadir banners, shortcodes para mostrar productos destacados o rebajados, incluso saludos personalizados.

En este ejemplo he metido:

  • Un saludo personalizado antes del shortcode que mostrará las variables.
  • Un texto personalizado de ayuda
  • Un shortcode de WooCommerce al final que muestre los últimos 4 productos rebajados

Y lo que obtienes es esto:

Como ves, es un modo genial y sencillo de personalizar la página “Mi cuenta“, sin necesidad de saber de código ni instalar ningún plugin adicional.

Cómo personalizar la página “Mi cuenta” programando

Si quieres llegar a más personalizaciones y sabes programar haz lo siguiente:

  1. Accede por FTP o el panel de archivos de tu hosting y copia el archivo my-account.php de la carpeta wp-contents/plugins/woocommerce/templates/myaccount a tu ordenador.
  2. Edita el contenido de tu copia de my-account.php incluyendo los códigos y estilos que quieras añadir o modificar.
  3. Por FTP o el panel de archivos del hosting crea en la ruta wp-content/themes/carpeta-de-mi-tema/ una carpeta llamada woocommerce, y dentro de ella otra carpeta llamada my-account. Quedará tal que wp-content/themes/carpeta-de-mi-tema/woocommerce/my-account/. Por supuesto cambia lo de carpeta-de-mi-tema por el nombre de la susodicha.
  4. Sube por FTP o el panel de archivos del hosting el archivo my-account.php a la recién creada carpeta wp-content/themes/carpeta-de-mi-tema/woocommerce/my-account/.
  5. Comprueba los cambios en la página de “Mi cuenta”.

En la nueva página puedes añadir o modificar lo que quieras.

Por supuesto, para crear una página personalizada es prácticamente imprescindible que conozcas de manera profunda cómo programar en WordPress y las funciones y API de WooCommerce con las que personalizar esta página.

Cómo personalizar la página “Mi cuenta” con funciones

También puedes personalizar la página de “Mi cuentaprogramando funciones que, sin necesidad de crear una nueva plantilla, modifiquen la página a tu gusto.

En este ejemplo vamos a ver cómo añadir una nueva variable a la página de “Mi cuenta“, con su propio enlace y contenido.

Solo tienes que añadir tus funciones a tu plugin de personalizaciones o al archivo functions.php del tema activo.

Primero añadimos el enlace en el menú:

Luego creamos la variable:

Luego solo te queda añadir contenido a tu nueva variable, así:

Esto es solo un ejemplo, pero puede servirte de punto de partida para otras personalizaciones.

Cómo personalizar la página “Mi cuenta” con un plugin

Y, claro, si prefieres personalizar la página “Mi cuenta” con la ayuda de un plugin te recomiendo Yith WooCommerce Custom My Account Page, una joya, y muy fácil de utilizar y configurar.

Sus características permiten:

  • Cambiar los estilos de la página a barra lateral o pestañas.
  • Poner la barra lateral de variables a derecha o izquierda.
  • Personalizar todos los colores de las variables, en pestaña o barra lateral.
  • Permitir al usuario subir su propio avatar o mostrar el gravatar de su cuenta de cliente.
  • Añadir variables.
  • Añadir grupos de variables, plegados o desplegados.
  • Personalizar el contenido de las variables por defecto y personalizadas.
  • Personalizar los iconos de las variables por defecto y las personalizadas.
  • Configurar qué perfil de usuario podrá ver qué variables, ya sean las variables por defecto o las personalizadas.

Cambiando estilos

Una vez instalado y activo solo tienes que pasarte por su página de ajustes para empezar dando tu estilo a la página.

Lo primero es elegir si quieres ver la página en modo barra lateral, a la izquierda o a la derecha:

Estilo barra lateral derecha

 

Estilo barra lateral izquierda

 

Como ves, aquí ya se aprecian cambios aún sin personalizar nada más, pues tienes el avatar del usuario y un cómodo botón para salir. Además de poder poner las variables a la derecha si te gusta más.

Pero personalmente me parece mucho más interesante el diseño de pestañas:

Estas primeras decisiones las tomas en los ajustes generales del plugin:

Avatares personalizados

Y, si te has fijado en la captura anterior, si tienes activa la casilla de avatares personalizados, el usuario podrá subir haciendo clic en su avatar actual, un avatar personalizado distinto.

Colores personalizados

A partir de aquí, sin salir de esta página de ajustes, podemos personalizar los estilos de la página:

Consiguiendo páginas de cuenta adaptadas a los estilos corporativos de la web o personalizados:

Personalizando variables

En la siguiente pantalla de ajustes es donde están las variables, que puedes modificar para cambiarles el nombre o el icono por defecto a lo que prefieras. Puedes también especificar qué perfiles de usuario verá cada variable.

Añadiendo variables y grupos de variables personalizados

Pero para ir más allá puedes también añadir tus propias variables e incluso grupos de variables personalizados, en los que incluir variables a su vez, ya sean personalizadas o por defecto.

Para ello simplemente elige el botón para Añadir grupo o Añadir variable y ponle nombre. A partir de ahí los gestionas como cualquier otra variable.

Y todo aparecerá en tu página “Mi cuenta” totalmente personalizada

Unificando todo

Y para terminar, lo mejor de todo, podemos seguir aplicando personalizaciones como las que vimos al principio, editando la página de “Mi cuenta” a nuestro gusto añadiendo enlaces o lo que sea, conjuntamente con las personalizaciones del plugin Yith WooCommerce Custom My Account Page.

De este modo tendremos lo mejor de, al menos, 2 de los 4 métodos para personaliza la página “Mi cuenta” de WooCommerce.


¿Y a ti? ¿qué método te ha gustado más para personalizar la página “Mi cuenta” de WooCommerce?

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (7 votos, promedio: 4,43 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad | Responsable de los datos: Fernando Tellado García | Finalidad: Gestión y moderación de comentarios | Legitimación: Tu consentimiento expreso | Destinatario: Disqus (acogido a EU-US Privacy Shield) | Derechos: Tienes derecho al derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform, _ga, _gid
cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform
_ga, _gid

¿Quieres cerrar tu cuenta?

Se cerrará tu cuenta y todos los datos se borrarán de manera permanente y no se podrán recuperar ¿Estás seguro?

Pin It on Pinterest