Como personalizar la página “Mi cuenta” de WooCommerce con Elementor

WooCommerce ya viene de fábrica con un diseño para la página de “Mi cuenta”, es decir, el escritorio al que entran los clientes para revisar todos sus datos como órdenes, direcciones, detalles de tu cuenta y otros más. Sin embargo cuando cambias de tema puede que la página Mi cuenta ya no se vea también o incluso que quede sin formato, y eso por supuesto no se ve nada profesional, ¿verdad? como ustedes saben WooCommerce usa un sistema de templates, pero esto puede ser demasiado complicado para algunos, así que en esta ocasión vamos a personalizar la página “Mi cuenta” con Elementor Pro (aunque hay una posibilidad de hacerlo con la versión gratuita, pero lo discutiremos más adelante), de modo que tengamos algo que luzca más profesional y sin tanto problema, aunque al final necesitemos meternos con algo de código, pero será mínimo.

Funcionamiento básico de las páginas requeridas de WooCommerce

WooCommerce necesita algunas páginas predefinidas en donde se incrusta un shortcode, que es el encargado de mostrar toda la funcionalidad requerida; estas páginas son Carrito, Finalizar compra, Mi cuenta y Términos y condiciones; las encontrarás en WooCommerce > Ajustes > Avanzado:

Cada una de estas páginas contienen sólamente un shortcode y son los siguientes [woocommerce_cart], [woocommerce_checkout] y [woocommerce_my_account]; la última no lleva un shortcode, pues es una página común y corriente que tu tendrás que hacer y que te recomiendo que hagas, puesto que se debe usar en tu sitio y también puede usarse de manera opcional en WooCommerce al finalizar la compra.

Vale mencionar que estas páginas se pueden crear automáticamente durante la configuración inicial de WooCommerce (con el asistente), pero tu puedes cambiarla a cualquier página que quieras. Esta es la que nos importa y con la cual trabajaremos de ahora en adelante

La página “Mi cuenta” estándar de WooCommerce

Si abres la página de “Mi cuenta”, verás algo como lo que se muestra a continuación:

Dale clic a la pestaña documento (1) y anota el slug de esta página (2, en este caso la parte que nos importa es /mi-cuenta), pues nos va a servir más adelante. El slug, como dice ahí, es la parte final de la URL (en términos generales) y si tu sitio fuera misitio.com, todo junto quedaría misitio.com/mi-cuenta. Si cambias el slug de la página “Mi cuenta”, deberás sustituirlo en todos lados donde hayas usado el anterior.

La página “Mi cuenta” estándar bajo el tema GeneratePress (gratuito) se muestra así:

Sobra decir que no luce nada bien. Pero sigamos: si revisas los enlaces, verás que todos tienen la misma raíz, es decir misitio.com/mi-cuenta, y van cambiando a misitio.com/mi-cuenta/orders (para órdenes), misitio.com/mi-cuenta/downloads (para descargas), y así para todos, y el shortcode se encarga de procesar cada uno y mostrar la información correspondiente, así que como te podrás imaginar, lo único que necesitamos es un conjunto de elementos que hagan las veces de menú y que soporten un enlace y nada más.

Ahora a personalizar la página “Mi cuenta” de WooCommerce

Ahora toca hacer el diseño de nuestra página personalizada “Mi cuenta” en Elementor Pro; aprovecho para hacer una breve aclaración: para hacer un dashboard de WooCommerce no hace falta la versión Pro, yo la estoy usando porque tiene ciertas cosas como los campos dinámicos y algunos componentes que me facilitan la vida, pero para nada es 100% necesario, con Elementor gratuito puedes hacer algo muy similar. Para hacerlo, vamos a Editar en Elementor la misma página de “Mi cuenta”, es decir, en donde está actualmente el shortcode [woocommerce_my_account]:

En mi caso, después de personalizar la página “Mi cuenta”, mi diseño quedó así:

Explicación del diseño en Elementor y como funciona

A continuación voy a explicar brevemente que elementos usé en cada sección y como funciona todo, indicaré que componentes son Pro por si quieres intentar un diseño sin echar guante de estos.

Cómo mostrar la imagen del cliente (1)

Para este elemento se usa una característica de Elementor Pro, que es la capacidad de usar datos dinámicos. El componente básico es una imagen, y para usar la imagen primero que nada deberás incrustar un widget de imagen y seguir los pasos:

1. Haz clic en el botón de datos dinámicos (1), lo que muestra una lista con los posibles campos que puedes usar;
2. Del grupo “Author” elije “User profile picture” para mostrar la imagen del usuario. Ten en cuenta que esta imagen sólo funciona si el autor tiene su correo registrado en Gravatar.

Cómo mostrar el mensaje de bienvenida (2)

El mensaje de bienvenida es el otro componente que junto con el anterior, sólo pueden usarse con las capacidades de Elementor Pro de usar datos dinámicos. Para ello, vamos a incrustar primero que nada un widget de Encabezado, y sigue las instrucciones:

1. Haz clic en el botón de datos dinámicos (1), lo que muestra una lista con los posibles campos que puedes usar;
2. Del grupo “Site”, elije el campo “User info”; al hacerlo, se cerrará la lista y el campo se mostrará normal, pero dice “User info” y tiene un ícono de llave española a un lado:

1. Dale clic a “User info” de nuevo, y eso abre un nuevo, eso abrirá los ajustes.
2. En el campo Field, elije cual quieres para mostrar el nombre de usuario, yo usé “Display name”. Ahora vamos a darle un toque amistoso al mensaje:

Ahora haz clic en el grupo Avanzado, y llena los textos que se muestren antes, después y por default (si el campo seleccionado está vacío), de modo que hagamos nuestro mensajde bienvenida más amigable.

Las opciones de menú para “Mi cuenta” (3)

La intención es recrear el menú original de WooCommerce, y en mi caso elegí hacerlo con widgets de Caja de ícono. Aparte del formato, cada uno apunta a la misma URL de cada opción de WooCommerce, es decir hacia /mi-cuenta/orders, /mi-cuenta/downloads, /mi-cuenta/edit-address y /mi-cuenta/edit-account, respectivamente.

El contenido respectivo de cada sección del dashboard de WooCommerce (4)

Lo que ves ahí es la salida del shortcode [woocommerce_my_account]. Ahora bien, en este punto deberías de verla así:

Como puedes ver, aún muestra el menú original, lo cual no queremos pues ya tenemos nuestro propio menú; aquí ya no tenemos como corregirlo más que usando CSS; afortunadamente los templates de WooCommerce están decentemente ordenados y separados, así que es fácil identificar las clases CSS que tenemos que usar para ocultar la parte que no queremos. Básicamente tenemos que ocultar la navegación y hacer que el resto del contenido ocupe todo el ancho del contenedor. En el editor de Elementor haz clic en el widget de Shortcode y ve a la pestaña Avanzado, ahí ve al final al apartado “Custom CSS” e introduce lo siguiente:

.woocommerce-MyAccount-navigation {
	display: none;
}

.woocommerce-MyAccount-content {
	width: 100% !important;
}

Para finalmente dejar la salida del shortcode como queremos.

Plantilla descargable de página “Mi cuenta” personalizada

Si quieres puedes descargar un archivo del template que hice para que lo uses como base de tu propio diseño:

Para importarlo a tus plantillas, ve a Plantillas y en esa vista haz clic en el botón de arriba de Importar plantillas, verás que aparece un selector de archivo, haz clic en Seleccionar archivo, lo que te mostrará un explorador de archivos de tu sistema, navega hasta el archivo que descargaste; haz clic en el botón Abrir y cuando estés de regreso en tu pantalla de WordPress, presiona el botón Importar ahora; espera un poco y verás en el listado de plantillas una nueva titulada tpl-custom-woo-dashboard, y ya puedes usarla en tus diseños.

A mejorar en nuestra página “Mi cuenta” personalizada

Aún después de personalizar la página “Mi cuenta”, quedan unos puntos a mejorar en nuestro diseño:

• La persistencia en la navegación: a diferencia de otras implementaciones, nuestro menú personalizado no tiene persistencia de la opción elegida, es decir, no sabes en cual estás actualmente, aunque visualmente no es complejo deducirlo. Sin embargo, esto podría mejorar con un menú personalizado para esta área, o bien con una modificación a la salida del shortcode [woocommerce_my_account], la cual les dejo de tarea, o si la solicitan, quizás la incluya como una mejora del artículo en un futuro.
• El soporte de la función de salir de la cuenta: como te habrás dado cuenta, la salida del shortcode [woocommerce_my_account] incluye un logout, el cual funciona perfectamente. Habrás notado que no puse un logout en nuestro menú, pues la URL para salir de tu cuenta lleva un identificador especial para añadirle seguridad y no te puedan sacar tan fácil de tu cuenta. De nuevo, no es complicado hacerlo pero hay muchas formas de implementarlo, y estoy preparando un artículo al respecto.

Cambios a la salida del shortcode [woocommerce_my_account]

Si quieres realizar cambios a la salida que hace el shortcode [woocommerce_my_account], tienes que reemplazar un template para lograrlo. No te preocupes, es fácil, sólo sigue estos pasos (necesitarás acceso a los archivos, ya sea por FTP o a través de tu panel de hosting):

1. Los templates de WooCommerce se pueden anular copiando el template fuente desde la carpeta original al folder del tema actual; ve a /wp-content/plugins/woocommerce/templates/myaccount y copia el archivo dashboard.php a la carpeta /wp-content/themes/<folder_de_tu_tema_activo>/woocommerce/myaccount, obviamente reemplaza <folder_de_tu_tema_activo> por el nombre de la carpeta de tu tema activo.
2. Una vez ahí, edita el archivo a tus anchas; por ejemplo, si quieres quitar el nombre del cliente y el enlace de logout por las razones que ya mencioné antes, abre el archivo, ubica el siguiente bloque y bórralo:

<p>
	<?php
	printf(
		/* translators: 1: user display name 2: logout url */
		wp_kses( __( 'Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)', 'woocommerce' ), $allowed_html ),
		'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
		esc_url( wc_logout_url() )
	);
	?>
</p>

Guarda los cambios, recarga la página “Mi cuenta” personalizada y verás que ya no están ambas cosas. Ya queda de tu parte dar el soporte para el logout de la cuenta, ya sea a través de código o plugins o cualquier otro método que tengas.

Palabras finales

Como puedes ver, es sencillo tener una página “Mi cuenta” personalizada de WooCommerce. Aquí vimos un ejemplo sencillo, pero el funcionamiento básicamente es el mismo para diseños más complejos, y puedes hacerlo tan complejo como tu creatividad te lo permita, y tendrás un plus en tus proyectos que te dará puntos extra con tus clientes.