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

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.