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:

[woocommerce_my_account]

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:

/**
  * Modificaciones a menu de mi cuenta
  */

 function my_account_menu_order() {
 	$menuOrder = array(
 		'dashboard'          => __( 'Dashboard', 'woocommerce' ),
 		'orders'             => __( 'Orders', 'woocommerce' ),
 		'downloads'          => __( 'Download', 'woocommerce' ),
 		'edit-address'       => __( 'Addresses', 'woocommerce' ),
 		'edit-account'    	=> __( 'Detalles de la cuenta', 'woocommerce' ),
 		'customer-logout'    => __( 'Logout', 'woocommerce' ),
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );

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í:

/** 
* Modificaciones a menu de mi cuenta 
*/
function my_account_menu_order() {
 	$menuOrder = array(
 		'orders'             => __( 'Orders', 'woocommerce' ),
 		'downloads'          => __( 'Download', 'woocommerce' ),
 		'edit-address'       => __( 'Addresses', 'woocommerce' ),
 		'edit-account'    => __( 'Detalles de la cuenta', 'woocommerce' ),
 		'customer-logout'    => __( 'Logout', 'woocommerce' ),
		'dashboard'          => __( 'Dashboard', 'woocommerce' ),
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );

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:

/** 
* Modificaciones a menu de mi cuenta 
*/
function my_account_menu_order() {
 	$menuOrder = array(
 		'orders'             => __( 'Tus pedidos', 'woocommerce' ),
 		'downloads'          => __( 'Tus descargas', 'woocommerce' ),
 		'edit-address'       => __( 'Direcciones', 'woocommerce' ),
 		'edit-account'    => __( 'Mis datos', 'woocommerce' ),
 		'customer-logout'    => __( 'Salir', 'woocommerce' ),
		'dashboard'          => __( 'Inicio', 'woocommerce' ),
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );

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:

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {
	content: '\f291';
}

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:

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {
	content: '\f07a';
}

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:

add_filter( 'woocommerce_account_menu_items', 'ayudawp_ocultar_direccion', 999 );
 
function ayudawp_ocultar_direccion( $items ) {
unset($items['edit-address']);
return $items;
}

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:

/**
  * Nuevas variables para la pagina de mi cuenta.
  */

 add_action( 'init', 'my_account_new_endpoints' );

 function my_account_new_endpoints() {
 	add_rewrite_endpoint( 'regalos', EP_ROOT | EP_PAGES );
 }

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:

/**
  * Recuperando el contenido de la nueva variable
  */

  // Premios
 add_action( 'woocommerce_account_regalos_endpoint', 'regalos_endpoint_content' );
 function regalos_endpoint_content() {
     get_template_part('mi-cuenta-regalos');
 }

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:

<?php

echo ‘Tus regalos’;

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

/** 
* Modificaciones a menu de mi cuenta 
*/
function my_account_menu_order() {
 	$menuOrder = array(
                'regalos'             => __( 'Tus regalos', 'woocommerce' ),
 		'orders'             => __( 'Tus pedidos', 'woocommerce' ),
 		'downloads'          => __( 'Tus descargas', 'woocommerce' ),
 		'edit-address'       => __( 'Direcciones', 'woocommerce' ),
 		'edit-account'    => __( 'Mis datos', 'woocommerce' ),
 		'customer-logout'    => __( 'Salir', 'woocommerce' ),
		'dashboard'          => __( 'Inicio', 'woocommerce' ),
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--regalos a:before {
	content: '\f005';
}

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:

/* Unificando contenido de pestañas */
// Primero ocultamos la pestaña a mover (edit-address en este ejemplo)
 
add_filter( 'woocommerce_account_menu_items', 'ayudawp_mover_direcciones', 999 );
  
function ayudawp_mover_direcciones( $items ) {
unset($items['edit-address']);
return $items;
}
 
// Luego mostramos el contenido de las direcciones en otra pestaña (edit-account en este ejemplo)
 
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );

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í:

/nombre-de-mi-tema/woocommerce/myaccount/dashboard.php

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

<?php
/**
 * My Account Dashboard
 *
 * Shows the first intro screen on the account dashboard.
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/dashboard.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.6.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
?>

<p><?php
	/* translators: 1: user display name 2: logout url */
	printf(
		__( 'Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)', 'woocommerce' ),
		'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
		esc_url( wc_logout_url( wc_get_page_permalink( 'myaccount' ) ) )
	);
?></p>
<!-- Personaliza lo que quieras pero solo a partir de aquí -->
<p><?php
	printf(
		__( 'From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">shipping and billing addresses</a>, and <a href="%3$s">edit your password and account details</a>.', 'woocommerce' ),
		esc_url( wc_get_endpoint_url( 'orders' ) ),
		esc_url( wc_get_endpoint_url( 'edit-address' ) ),
		esc_url( wc_get_endpoint_url( 'edit-account' ) )
	);
?></p>

<?php
	/**
	 * My Account dashboard.
	 *
	 * @since 2.6.0
	 */
	do_action( 'woocommerce_account_dashboard' );

	/**
	 * Deprecated woocommerce_before_my_account action.
	 *
	 * @deprecated 2.6.0
	 */
	do_action( 'woocommerce_before_my_account' );

	/**
	 * Deprecated woocommerce_after_my_account action.
	 *
	 * @deprecated 2.6.0
	 */
	do_action( 'woocommerce_after_my_account' );

/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */

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 Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(17 votos, promedio: 4.7)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

29 comentarios en “Cómo personalizar a tope la página «Mi cuenta» de WooCommerce”

  1. Hola Fernando,

    Lo que sería bestial es, quitar: (déjalo en blanco para que no haya cambios), en contraseña actual y nueva contraseña: por más vueltas que le doy a esto no le encuentro sentido y creo que induce a confusión al cliente.

    No sé que opinaras tu.

    Saludos!

      1. Hola Fernando,
        Ante todo gracias por tu respuesta.
        Lo siento, intentaré explicarme mejor.
        Fíjate en detalles de la cuenta, en el apartado de cambiar contraseña.
        Hay 3 campos: contraseña actual, nueva contraseña y repetir nueva contraseña. Pues bien, yo por más vueltas que le doy, no le encuentro sentido al mensajito entre paréntesis del primer y segundo campo, y como decía mi abuelo, más vale 1 minuto colorado que toda la vida siendo un tonto,no sé tu que opinas pero, ¿Qué sentido tiene: dejar en blanco para que no haya cambios?. Es decir, quieres cambiar la contraseña y al lado este mensaje??, es que no lo entiendo de verdad, para mí induce confusión y además no es el primer cliente que nos llamas diciendo que eso confunde.
        Parece una chorrada pero es que nos llamó la atención que más de un cliente llamara quejándose precisamente de eso.
        Por eso te decía que este artículo está genial, pero que sería la panacea poder quitar ese absurdo, a mi entender, mensaje.

        Solo lo digo como aportación.

        Saludos!!!

        1. Ah, es cosa de los textos originales de los creadores de WooCommerce (ahora que lo dices, uno está en masculino y otro en femenino en la traducción, lo cambio ya).

          Yo creo que la idea es que sea una ayuda, que el usuario sepa que si no quiere cambiar contraseña que deje el campo en blanco, yo siempre lo he entendido vamos.

          Quizás se podría mejorar el texto, y habría que ponerlo también en el campo de «confirmar» por coherencia, o quitarlo de todos como propones. Quizás si sea mejorable.

          En los textos originales no podemos cambiarlo pero sí en las traducciones, preguntaré al resto del equipo de traducción.

  2. Tomas Moya Rodriguez

    Lo más coherente es que ahí no pusiera nada. De hecho, viendo otros ecommerce aparecen los 3 campos poniendo contraseña actual, nueva contraseña y confirmar contraseña. Amazon, Pccomponentes,….
    Creo que se sobreentiende que no añadiendo nada en los campos no se va a realizar cambios. hay gente muy torpe que abandona carros solo por el hecho de pararse a pensar 1/2 segundo.

    Salu2!!!

  3. Hola Fernando,

    Con la nueva actualización de wc a 3.5 da el siguiente error en mi tema Storefront:

    2018-10-25T12:52:24+00:00 CRITICAL syntax error, unexpected ‘<', expecting end of file en /home2/descalificado/public_html/wp-content/plugins/code-snippets/php/admin-menus/class-edit-menu.php(189) : eval()'d code en la línea 1

    Un saludo.

      1. Me refiero que el código implementado en este artículo es el que parece ser que genera el error: Según entiendo, la línea 1. Los códigos los añado con code snippets. Y el caso es que el resultado de unir la dirección del cliente con los demás datos funciona correctamente, pero a veces genera un error 500. Revisando el registro en woocommerce lo ví.
        Sólo era por comentar.

        Gracias por contestar y saludos.

      2. Por cierto, hay alguna razón por la que ya se puede copiar códigos en aquí?. A mi por lo menos ya no me deja.

        Un saludo.

          1. No sé si hablamos de lo mismo Fernando, pero claro, revisando mi pregunta…, he escrito fatal.
            Digo, que ya no puedo copiar códigos de tu blog. Antes sin problema pero ahora no me deja.

            Gracias.

          2. Ah jaja

            Sí claro, pasa el cursor y haz clic en el icono de Copy te sale el código seleccionado, copias y pegas por ahí. Funciona bien, lo acabo de probar

  4. Hola, buen dia, primero felicitarlo por el artículo que la verdad es bien útil e interesante, segundo me gustaría si puede ayudarme con algo, y es que necesito deshabilitar la opción de editar los detalles de facturación, o sea en mi cuenta está la dirección de envío y los detalles del cliente, esos campos vienen acompañado con una opción de editarlos, es posible eliminar esta opción? gracias y muy amable

  5. Súper buen artículo, Fernando. Me ha venido de lujo tenerlo todo unido en un único post, porque justo estoy personalizando unas cosas de mi WooCommerce.

    Entiendo que para modificar el texto que aparece por defecto en la página de Mi Cuenta, habría que hacerlo creando carpeta de WooCommerce y modificando la plantilla de esa página. No se podría hacer directamente desde mi plugin de personalizaciones de WooCommerce ¿no?

  6. Hola, tengo un problema con la pagina de mi cuenta desde hace un tiempo, la cosa es que no se porque no me lleva a las páginas de pedidos ni de puntos ni de direcciones, siempre me lleva a la principal de escritorio, lo curioso es que la url si cambia pero no sale nada, tampoco me deja salir de la cuenta. Algunas veces no se como funciona pero al tiempo sin cambios vuelve a dejar de funcionar, me está volviendo loco el tema. Agradecería algo de luz a mi problema. Gracias

  7. Pablo Sanchez

    Buenas Fernando,

    No entiendo bien porque mi panel de woocommerce es distinto al que muestras en las imagenes (el panel donde aparecen las variables de dashboard, pedidos, etc., junto a los iconos)

    Mi panel es horizontal, con estilos distintos y más básicos, y si pongo un código en el personalizador para añadir un icono, en lugar de mostrar el icono aparece un recuadro (como simbolo de que no se tiene la librería para ver ese icono)

    1. Gorrino endobao

      Me hago la misma pregunta. Muy buen artículo por cierto Fernando. Me encantaría que nos ayudaras en esto

    2. Hola! Tengo el mismo problema, necesito poner un enlace en una de las pestañas que he creado pero no tengo ni la menor idea de como hacerlo! Muchas gracias por la clara explicación del contenido!

  8. Muchas gracias Fernando. Después de dos años, sigue siendo un artículo muy muy útil! Gracias por compartir tus conocimientos con todos!

  9. Hola Fernando, cómo podría poner en la página de ‘MI CUENTA’, que si se registran, van a obtener un descuento? Antes de realizar el registro..

  10. Carlos Pacaya

    Hola estimado,
    La información que me brindo fue de excelencia, lamentablemente no me sale el unificar las pestañas. Encontraré la solución, pero mi verdadero problema es cuando intento enlazar un plugin en la misma página de – Mi cuenta – Puesto que este Plugin que añadí sirve para mostrarme una interfaz de Usuario, login, registro y un perfil de cuenta. Al parecer este plugin ocasiona un conflicto. Mi pregunta es: ¿Se puede direccionar estás pestañas por defecto como «Pedidos o Direcciones»; Quiero direccionarlas hacia otro lugar y que no me aparezca en donde esta dicho plugin puesto pues hacen un conflicto. ¿Se puede agregar links personalizados para abrirlo en otro lugar?. Espero haberme dejado entender. Agradecería tu ayuda. Saludos desde Perú 😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido