Los usuarios que se registran en tu tienda online tienen su propio panel de usuario en el que pueden encontrar cosas fundamentales como: historial de pedidos, datos de envío, facturas, etc. Muchas veces al ser nuestra tienda grande y con varias funciones necesitamos más personalización en este punto.
Por ejemplo: si insertamos un sistema de puntos de descuento en nuestro Ecommerce en la propio panel aparecerá una nueva pestaña con los puntos que ha recaudado y cómo gastarlos.
Pero hay algunas veces en las que necesitamos que haya una pestaña extra personalizada, cambiar el orden de los elementos o incluso poner las pestañas en vertical en vez de en horizontal. Todo esto lo vamos a ver de dos formas con un plugin o sin plugin.
Índice
¿Por qué personalizar la página de mi cuenta?
Por defecto la página de usuario que sale es algo así:

Puede variar un poco dependiendo de la plantilla que uséis pero normalmente es esto.
Temos que conseguir en esta página que:
- El cliente obtenga y encuentre toda la información de forma sencilla.
- Fidelizarlo para que pueda realizar otro pedido.
- Mostrar información dependiendo del tipo de cliente que sea.
- Darle una experiencia completa al usuario.
Para conseguir todo esto vamos a ver el mejor plugin para conseguirlo:
Con plugin: Yith WooCommerce customize My Account page
Lo bueno de usar un plugin es que es mucho más fácil de modificarlo todo. Es decir, serás libre de añadir y gestionar la información más adecuada, ordenándola con pestañas o menús.
Este es el plugin más completo que he encontrado para poder realizar todo lo que necesitamos, os dejo aquí el enlace para adquirirlo. Con el podremos principalmente:
- Poder poner el menú en horizontal o vertical
- Cambiar el estilo de los colores
- Poner una imagen de perfil, muy útil si queremos trabajar las valoraciones en nuestro ecommerce.
- Ordenar las pestañas del menú y poder ponerles un icono
- Añadir/Eliminar las pestañas que quieras
- Elegir la primera pestaña por defecto
Con todo esto podemos cumplir con las permisas que he explicado arriba, obteniendo un resultado como este:

Cambiar la página de mi cuenta a código
Si os queréis ahorrar un plugin o modificar pequeñas cosas, esta es vuestra mejor opción.
Eliminar una pestaña
Vamos a ponernos en el ejemplo de que tenemos una tienda física y no queremos mostrar la pestaña de descargas porque no vamos a poner nunca nada ahí y puede confundir al cliente. Por lo que usamos el siguiente código:
add_filter ( 'woocommerce_account_menu_items', 'dl_eliminar_pestañas_mi_cuenta' );
function dl_eliminar_pestañas_mi_cuenta( $menu_links ){
unset( $menu_links['downloads'] ); // Aquí ponemos el que eliminamos(descargas)
return $menu_links;
}
Este sería en el caso de descargas, pero os dejo el resto si quereréis quitar alguna más:
unset( $menu_links['dashboard'] ); // Quitar página de escritorio
unset( $menu_links['payment-methods'] ); // Quitar página de métodos de pago
unset( $menu_links['orders'] ); // Quitar página de pedidos
unset( $menu_links['edit-address'] ); // Quitar dirección
unset( $menu_links['edit-account'] ); // Quitar página de detalles de cuenta
unset( $menu_links['customer-logout'] ); // Quitar página de salir del perfil
Alterar el orden de las pestañas
Ahora no queremos mostrar lo primero el escritorio, sino los pedidos del cliente, ya que hemos visto que es lo que más ve al entrar en la página de usuario, por lo tanto establecemos este nuevo orden:
add_filter ( 'woocommerce_account_menu_items', 'dl_cmabiar_orden_mi_cuenta' );
function dl_cmabiar_orden_mi_cuenta() {
$menuOrder = array(
'orders' => __( 'Orders', 'woocommerce' ),
'downloads' => __( 'Download', 'woocommerce' ),
'edit-address' => __( 'Addresses', 'woocommerce' ),
'edit-account' => __( 'Account Details', 'woocommerce' ),
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $menuOrder;
}
Los podemos ordenar dentro de este apartado como queramos.
Cambiar el nombre de la pestaña
En este caso vamos a cambiar el nombre del apartado pedidos por pedidos y facturas, para que el cliente encuentre de forma sencilla
add_filter ( 'woocommerce_account_menu_items', 'dl_renombrar_pestañas_mi_cuenta' );
function dl_renombrar_pestañas_mi_cuenta( $menu_links ){
// Para rellenar: // $menu_links['El ID mencionado en el apartado anterior'] = 'Nuevo nombre';
$menu_links['orders'] = 'Pedidos y facturas';
return $menu_links;
}
Este sería con mi ejemplo, si quieres hacer otro modifica los apartados que te he dejado para rellenar y ya está.
Añadir una pestaña que redirija a una página concreta
Queremos que el cliente cuando entre en su cuenta tenga una pestaña que vaya directa a la de contactar para que pueda encontrarnos rápido si tiene una duda. Cuando digo redirijir a una página concreta me refiero que salga del propio panel de usuario a otra página de nuestra tienda.
add_filter ( 'woocommerce_account_menu_items', 'dl_añadir_enlace_mi_cuenta' );
function dl_añadir_enlace_mi_cuenta( $menu_links ){
// we will hook "anyuniquetext123" later
$new = array( 'Contacto' => 'Contacto directo' ); // Define en el primer lugar el slug y en el segundo el nombre que se muestra de la pestaña
$menu_links = array_slice( $menu_links, 0, 1, true )
+ $new
+ array_slice( $menu_links, 1, NULL, true );
return $menu_links;
}
add_filter( 'woocommerce_get_endpoint_url', 'dl_enlace_mi_cuenta', 20, 4 );
function dl_enlace_mi_cuenta( $url, $endpoint, $value, $permalink ){
if( $endpoint === 'Contacto' ) {
// Cambia aquí la url a la que te quieres dirigir
$url = site_url('/contactar/');
}
return $url;
}
Añadir pestaña propia a la cuenta
Por último vamos a añadir una pestaña interactiva, ya que estamos haciendo una estrategia de evolution selling y queremos mostrar el historial de los últimos que ha visto el cliente con el shortcode que explicaba en el tutorial en cuestión:
add_filter ( 'woocommerce_account_menu_items', 'dl_añadir_pestaña_1', 40 );
function dl_añadir_pestaña_1( $menu_links ){
$menu_links = array_slice( $menu_links, 0, 5, true )
+ array( 'historial-productos' => 'Historial de productos' ) // Cambia en la segunda línea el nombre de la pestaña
+ array_slice( $menu_links, 5, NULL, true );
return $menu_links;
}
add_action( 'init', 'dl_añadir_zona_cuenta_1' );
function dl_añadir_zona_cuenta_1() {
add_rewrite_endpoint( 'historial-productos', EP_PAGES );
}
add_action( 'woocommerce_account_historial-productos_endpoint', 'dl_añadir_contenido_pestaña_cuenta_1' );
function dl_añadir_contenido_pestaña_cuenta_1() {
echo 'Estos son los últimos productos que has visitado:<br> [Shortcode]';
}

Importante después de añadir este código es muy importante actualizar los enlaces permanentes aunque no hayamos hecho ningún cambio. Ya que sino hará una redirección como enlace.
Diegol´s resolución
Con todos estos cambios en la página de mi cuenta conseguimos:
- Aumentar las posibilidades de una segunda compra por parte del cliente(fidelización).
- Incrementar el pedido medio de la tienda.
- Ahorrarnos tiempo de atención al cliente, puesto que al tenerlo todo ordenado y a su alcance no necesita atención por nuestra parte.
- Aumentar la usabilidad y accesibilidad de nuestro ecommerce.
El tema de usar plugin o a código como he mencionado depende del nivel de personalización, si es poco a código, si es mucho plugin y ahorrarás tiempo.
De todas estas personalizaciones están incluidas en mi servicio de desarrollo de tiendas online. ¿Alguna duda? ¿Te gustaría que explicase alguna personalización extra? Déjamelo en comentarios.
Hola !
Diego y si quiero convertir cada pestaña en una pagina indendiente?
Es decir que pueda crear una pagina «Detalles de la Cuenta» y en ella , solo aparezca estas opciones y así sucesivamente con las otras.
Puedo implementar eso?
Hola Eduardo,
¿Te refieres que al hacer clic en una pestaña de la cuenta te redirija a una página independiente con todos esos datos? Si es así lo explico en el apartado: Añadir una pestaña que redirija a una página concreta
Cualquier duda me comentas,
Un saludo!
Hola Eduardo, encontraste como hacer esto? justo estoy queriendo hacer lo mismo. que cada pestaña de mi cuenta sea una página nueva, pero cuando estoy por ejemplo en la página «mis pedidos» y quiero ver el detalle de alguno de los pedidos me redirige a un error 404, alguna idea de como solucionar eso? no se si me he explicado bien.
Hola Diejo, antes que todo agradecer por tu contenido.
Traté de hacer el «Añadir pestaña propia a la cuenta» pero no me muestra el [Shortcode], hice la prueba con los de la plantilla y con los de un plugin de Lista de deseos para que me muestre lo que necesito, sin embargo, me muestra pero sin cargar el contenido, algo así…
Estos son los últimos productos que has visitado:
[yith_wcwl_wishlist]
Me podrías indicar lo que me falta o el error que estoy cometiendo?
Muchas Gracias
Hola Diego:
Permíteme una pregunta sobre tu artículo que es muy útil y práctico.
En el apartado «Añadir una pestaña que redirija a una página concreta», el fragmento de código sobre la URL que has incluido abre en la misma pestaña que Mi cuenta, ¿qué cambio habría que introducir en el código para que la URL abra en otra pestaña y así mantener el acceso a la pestaña de Mi cuenta? Gracias.
Hola Victor,
Nunca he hecho algo así y no encuentro ningún plugin que lo realice. Igualmente me apunto la idea para a través de un snippet redirigir a un formulario cuando se haga que sería lo más práctico. Igualmente pregunta en los foros de soporte a ver si hay algún mesías 🙂
Un saludo!
no puede ser con html? utilizando la propiedad: target=blank del enlace
Hola! Muchas gracias por el contenido. Siempre aportas mucho Diegol.
Te hago una consulta, ¿Cómo podría agregarle a ese Snnipet un icono? Un dash icon?
Por ejemplo ponerle un icono a la pestaña de Dashoboard, otro a la de mis pedidos, y así.
En este caso trabajo con Genesis.
Muchas gracias!
Hola Mariano,
Gracias por tus palabras 🙂
Respecto a tu consulta sí, mientras lo soporte tu WordPress, es decir tengas Dashicons insertado por código o plugin sin problemas.
Un saludo!
hola que tal he buscado mucho por internet pero no he podido encontra para cambiar el «iniciar sesion» o «registrarme» que aparece en letra y quiero cambiarlo a algo mas bonito como unos botones. Me gustaria que si tienes como customizarlo, publique una entrada de ello. Muchas gracias
Gran contenido e valor el de este post, como siempre 🙂
He implementado la función de añadir una pestaña nueva para que me redirija a otra web, y funciona bien…peroooo. El problema que tengo es que al redirigir a otra web, no aparece el menú como en las opciones que trae woocommerce por defecto
¿Que hago mal?
¡¡¡Muchas gracias por tus aportes!!!
Hola Juankar,
Gracias por tu comentario. Si puedes desarrollar más el problema… por lo que dices estás usando el código de redirigir a otra url. Con ese código cambiando la url que quieres no tendrías problema, has hecho alguna modificación?
Un saludo!