Personalizar la página de Mi Cuenta en WooCommerce

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.

¿Por qué personalizar la página de mi cuenta?

Por defecto la página de usuario que sale es algo así:

personalizar mi cuenta en WordPress
Cuenta de usuario por defecto en WooCommerce

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:

configurar YITH WOOCOMMERCE CUSTOMIZE MY ACCOUNT PAGE
Cambios del menú vertical, iconos y añadido la pestaña de favoritos

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]';
 
}
añadir nueva pestaña en la pagina de cuenta n WooCommerce
Añadir la pestaña de historial

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.

¡Haz clic para puntuar esta entrada!
(Votos: 9 Promedio: 5)

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Contactar

También puedes suscribirte a mi newsletter para no perderte ninguna novedad

Reader Interactions

comentarios

  1. eduardo says

    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?

    • Diegol says

      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!

  2. Luis says

    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

  3. Víctor says

    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.

    • Diegol says

      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!

Deja una respuesta

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