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 ...

FlojitoNo está malEstá bienMe ha servidoFantástico (2 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

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

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar