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

Después del carrito y la página de finalizar compra, si hay una página importante en un e-commerce es la página de la cuenta de los clientes.

En esta página podrán revisar pedidos, modificar sus datos, añadir métodos de pago y todo aquello que quieras añadir.

¿Añadir? Sí, he dicho añadir, personalizar, lo que quieras, porque vamos a aprender a personalizar la página “Mi cuenta” de WooCommerce.

La página “Mi cuenta”

Por defecto, WooCommerce crea la página “Mi cuenta” automáticamente durante el asistente de instalación, pero si por algún motivo no se creó puedes hacerlo tú mismo.

Solo tienes que añadir el siguiente shortcode a la página que quieras:

Posteriormente indicar cual es en los ajustes de WooCommerce, en WooCommerce > Ajustes > Avanzado.

Y, por defecto, tendrá más o menos este aspecto, con los elementos principales de gestión de cuenta de usuario.

A partir de aquí es cuando nos ponemos manos a la obra y empezaremos a personalizar la página de “Mi cuenta” de WooCommerce.

Cómo personalizar el orden del menú

Una primera personalización que se nos puede ocurrir es cambiar el orden de los elementos del menú de la cuenta.

Para ello añadiremos el siguiente código al archivo functions.php o a tu plugin de personalizaciones:

Este código tiene el orden por defecto de los menús, así que solo tienes que cambiar el orden en el mismo en el array $menuOrder, por ejemplo así:

Y conseguirás un cambio tal que así:

Cómo personalizar los nombres e iconos del menú

Si nos ponemos creativos, podemos cambiar nombres e iconos del menú. Es muy fácil.

Cambiar los nombres es tan sencillo como partir del código de la personalización anterior y poner otros nombres, por ejemplo:

Y tendremos esto:

Para cambiar los iconos tenemos que echar mano de nuestro querido CSS.

Lo primero es detectar el icono actual que esté usando el tema. Solo tienes que hacer clic derecho en el elemento a mostrar en tu página y hacer clic en el elemento de menú emergente del navegador “Inspeccionar” (en el caso del navegador Chrome).

En la ventana de la consola verás que, en los estilos, en el caso del tema StoreFront, utiliza esta clase:

Así que ya sabes qué modificar. Solo tienes que abrir el Personalizador de WordPress y en la sección de CSS adicional añadir lo siguiente:

Visto visualmente sería así:

Y habremos cambiado el icono de la cesta por otro de un carrito.

Como el tema StoreFront utiliza iconos de Font Awesome verás que solo he cambiado el código por defecto (f291) por otro distinto (f07a). Para saber el código de otros iconos puedes consultarlos aquí.

Cómo ocultar un elemento del menú

Si quieres ocultar algún elemento del menú solo tendrías que añadir un código como este a tus funciones personalizadas:

En este caso estamos quitando la pestaña de direcciones, pero podemos hacerlo con cualquier otra variable.

Cómo añadir una nueva pestaña al menú

¿Empezamos a liarla? Porque hasta ahora solo hemos hecho pequeñas modificaciones, que sí, que aportan, pero donde de verdad vamos a aprovechar todo el potencial de usar funciones es añadiendo nuevos elementos.

Para añadir un nuevo elemento al menú tenemos primero que crear un nueva variable, un ‘endpoint‘.

Esta variable de WooCommerce actuará como el slug de la URL a continuación de /mi-cuenta/.

En este ejemplo voy a añadir una nueva sección llamada “Regalos“. Para ello lo primero es crear la nueva variable, como siempre en nuestro functions.php o plugin de personalizaciones:

Guarda los cambios y ve al escritorio de WordPress > Ajustes > Enlaces permanentes. Ahí, sin modificar ningún ajuste, guarda cambios para que se registre la nueva variable, sino no funcionará.

Una vez hecho esto ya podemos añadir el siguiente código para obtener la template-part necesaria para el contenido de la nueva sección:

Ahora crea un nuevo archivo PHP en la carpeta raíz del tema activo, llamado ‘mi-cuenta-regalos‘  y añádele lo que sea, por ejemplo:

Y ya puedes añadir el nuevo elemento de menú “Regalos” y ponerle un icono chulo con CSS:

Y mira que monada de nuevo elemento:

Chulo ¿eh?

Cómo unificar el contenido de varias pestañas

Este truco personalmente me encanta hacerlo para mis clientes.

Y es que cuando añades plugins para WooCommerce estos suelen ir añadiendo elementos (pestañas) al menú, haciéndose demasiado largo el menú, y es entonces una solución muy elegante unificar el contenido de varias pestañas en uno solo.

Uno muy lógico y práctico es mover el cambio de direcciones a la pestaña de “Detalles de la cuenta“, pero puedes aplicar este truco a cualquier elemento, existente o nuevo, depende de tus necesidades y creatividad.

El ejemplo que te comento sería este:

En el truco usamos primero el código que hemos aprendido antes para ocultar pestañas, y luego creamos la acción que añade a la variable de “Detalles de la cuenta” el contenido de las direcciones.

El resultado sería así…

¿A que está muy bien?

Cómo personalizar el contenido de las pestañas

A veces querremos entrar a cambiar el contenido por defecto de alguna de las pestañas del menú de la página de “Mi cuenta“.

Si es este el caso, tenemos que seguir las directrices de creación de plantillas de WooCommerce, más que nada para no modificar los archivos existentes, para no perder cambios en las actualizaciones.

El procedimiento, no obstante, es sencillo.

  1. Crea una carpeta llamada ‘woocommerce‘ en el directorio raíz del tema activo.
  2. Copia en esa carpeta el archivo que quieres personalizar.
  3. Edita el archivo y cámbialo a tu gusto.

Esto sirve tanto para estas personalizaciones como para modificar las plantillas de correo, así que con este sencillo procedimiento se abre un mundo de posibilidades de personalización de WooCommerce.

En lo que respecta a lo que estamos viendo hoy vamos a buscar, por ejemplo, el contenido de la pestaña ‘Escritorio‘, que a poco que naveguemos por la estructura actual de carpetas del plugin, veremos que está en ‘/myaccount/dashboard.php‘.

Así que copiaremos esa misma ruta en nuestra carpeta ‘woocommerce’ que hemos creado, quedando así:

Una vez tengas esto ya puedes abrir el archivo ‘dashboard.php‘ de tu plantilla para modificar/añadir/quitar lo que sea.

Solo hazme un poco de caso y empieza a personalizar a partir de la línea que te indico en el código. A partir de ahí el límite es tu imaginación y tus conocimientos de programación.

Puedes repetir este proceso con cualquier otra plantilla que quieras personalizar del plugin, respetando las rutas y el procedimiento resumido antes.

Solo revisa a cada actualización de WooCommerce si ha cambiado algo en este proceso o la ruta de los archivos, que a veces pasa.

Cómo personalizar contenido fuera de las pestañas

Aquí ya es donde nos ponemos creativos, y además esto es para todos los públicos.

¿Te acuerdas que al principio de este artículo te decía que la página “Mi cuenta” es una página normal con un shortcode?

Pues es ahí donde está la gracia, porque todo o que hemos visto hasta ahora es lo que se mostrará, por decirlo de algún modo, dentro del shortcode, pero ¿y por fuera?

Pues ahí puedes meter lo que quieras, solo tienes que editar la página, y salvo quitar el shortcode puedes modificarla como desees.

Da igual si le añades imágenes, texto, antes o después del shortcode, o si incluso la maquetas con tu constructor favorito, mientras mantengas el shortcode intacto en alguna parte seguirá siendo la página de “Mi cuenta pero con todo lo que quieras añadirle.

También puedes añadirle más shortcodes, y hay muchos, para por ejemplo mostrar los artículos de la tienda en oferta, o lo que se te ocurra, el límite aquí eres tú, y que no quede un churro de página de “Mi cuenta” por supuesto.

Resumiendo

Como habrás visto la página “Mi cuenta” de una tienda online hecha con WooCommerce es totalmente personalizable.

Puedes modificar todos y cada uno de los elementos existentes, añadir nuevos, quitarlos, incluso maquetar la página.

Lo único que debes recordar en todo momento es que el objetivo de esta página es tu cliente, pues es su espacio personal, y que debes utilizarla para darle utilidad, y si acaso animarle a comprar algo más, pero sin pasarte, para eso ya tienes el resto de la tienda online, y tu estrategia de funnel de ventas.

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,57 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

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This