Son ya decenas de artículos los que llevo publicados explicando cómo personalizar WooCommerce en función de las necesidades de tu tienda, pero hay una sección que aún no había tocado y que sin embargo puede aportar un gran valor añadido a tu negocio de cara a tus clientes: la página de Mi cuenta.
Al fin y al cabo esa página es la sección personal de cada uno de tus clientes en tu tienda online y, como suele ocurrir cuando estamos limitados por la estandarización, no siempre cubre todas las necesidades. Por eso vamos a ver cómo se pueden añadir pestañas personalizadas a la página Mi cuenta en WooCommerce.
Tabla de contenidos
Personalizar la página Mi cuenta
Es indiscutible el auge del comercio electrónico. Si hace unos años una tienda online era el negocio secundario de las tiendas físicas, hoy el ecommerce es el plan A, y el salto muchas veces ya no se produce del mundo offline al mundo online, sino al contrario.
Pero no voy a ponerme a teorizar ni a contar obviedades. Lo que quiero destacar es la enorme competencia en el panorama actual del ecommerce, y la única forma de destacar. No es ningún secreto: es la diferenciación, ofrecer una propuesta de valor que no tenga tu competencia.
Valor añadido y personalización
Pero claro, es imposible diferenciarse, ofrecer algo diferente, con un sistema estándar. La diferenciación exige personalización, y donde más es necesario ofrecer una experiencia personalizada es en los puntos en los que se interactúa con el cliente.
Y precisamente uno de esos puntos en la tienda en la página Mi cuenta, el «panel de control» en el que el cliente puede ver y organizar toda la información que le atañe de nuestro ecommerce: sus pedidos, facturas, métodos de pago, datos de facturación y envío, suscripciones y descargas si las hay…
Por desgracia, ésa es una de las secciones menos personalizables en WooCommerce. ¿Cómo puedes ofrecer una experiencia personalizada a tus clientes, si no puedes personalizar la interfaz mediante la que te relacionas con ellos?
Sin duda, la página Mi cuenta es la que debemos utilizar cuando necesitamos interactuar de forma permanente con los clientes de forma general. Por ejemplo, imagina algo así:
Personalizar las secciones de la página Mi cuenta
Decía antes que la página Mi cuenta es una de las secciones menos personalizables de WooCommerce, aunque no es exactamente cierto. Evidentemente se puede personalizar, pero ocurre que no es sencillo hacerlo. Quizá por eso no he sido capaz de encontrar ningún plugin para ello; así que lo he hecho yo mismo.
Así que, atendiendo al creciente número de desarrolladores que sigue este blog (¡gracias!) explicaré cómo personalizar las pestañas de Mi cuenta de dos formas: primero mediante código (supondré conocimientos de PHP y de desarrollo para WordPress), y después utilizando un plugin para ello.
Añadir pestañas a Mi cuenta mediante código
Como decía más arriba, no es sencillo. Y menos cuando a priori no sabemos cómo se llamarán esas pestañas o qué contenido querrá el usuario que tengan. Y es que hay que hacer varias cosas. Veámoslas por orden.
Registrar el endpoint
Como habrás visto, las diferentes pestañas de la página Mi cuenta funcionan con endpoints, como puedes ver por las URL, generadas como si fueran subdirectorios de mi-cuenta. Si no estás familiarizado con este concepto puedes echar un vistazo a este artículo:
Así que lo primero que tenemos que hacer es registrar el endpoint durante el init de WordPress. Lo podemos hacer con la función add_rewrite_endpoint():
add_action ('init', function () {
add_rewrite_endpoint ('url-endpoint', EP_ROOT | EP_PAGES);
});
La función de callback puedes ponerla de la forma habitual, aunque en esta ocasión la he puesto en una sola sentencia junto con el hook porque es muy corta. El slug (url-endpoint) será el que después quedará como url de la pestaña de la forma http://www.tutienda.com/mi-cuenta/url-endpoint/
Recuerda que tras registrar un nuevo endpoint se deben actualizar los permalinks para que no dé un error 404 (basta con ir a Ajustes > Enlaces permanentes y pulsar Guardar sin necesidad de hacer ningún cambio).
Añadir la query var
También un paso bastante sencillo, así que de nuevo pondré la función de callback en la misma sentencia en que utilizo el filtro. Basta con recibir las query vars con el filtro al efecto y añadir la/s nuestra/s al array:
add_filter ('query_vars', function ($vars) {
$vars[] = 'url-endpoint';
return $vars;
});
Añadir la pestaña en Mi cuenta
Ahora, cuando ya nos hemos asegurado de que se genere un enlace válido, es cuando insertamos propiamente la pestaña en Mi cuenta:
add_filter ('woocommerce_account_menu_items', function ($endpoints) {
$endopints['url-endpoint'] = 'Nombre de la pestaña';
return $endpoints;
});
Un desarrollador mediocre daría con eso este paso por terminado, pero el resultado sería que nuestra pestaña personalizada quedaría la última, por debajo de la pestaña Cerrar sesión, lo cual no causa un buen efecto: Cerrar sesión debe ser la última.
Así que vamos a añadir un pequeño paso que pase de nuevo la opción Cerrar sesión por debajo de nuestras pestañas personalizadas. El endpoint por defecto que implementa este enlace es customer-logout aunque, como se puede cambiar, lo mejor es obtenerlo directamente de la base de datos (la opción en la que se registra es woocommerce_logout_endpoint).
add_filter ('woocommerce_account_menu_items', 'ejr_aniade_pestania');
function ejr_aniade_pestania ($endpoints) {
$endopints['url-endpoint'] = 'Nombre de la pestaña';
if ($cerrar = get_option ('woocommerce_logout_endpoint')) {
$temp = $endpoints[$cerrar];
unset ($endpoints[$cerrar]);
$endpoints[$cerrar] = $temp;
}
return $endpoints;
}
De esta forma conseguimos fácilmente que nuestra pestaña se situe al final, después de las pestañas de WooCommerce, pero antes de la opción de Cerrar sesión.
Añadir el contenido de la pestaña
Terminamos ya añadiendo el contenido para la nueva pestaña que hemos creado. Esto es relativamente sencillo cuando conocemos la URL del endpoint de antemano, pero no tanto si queremos crear un plugin para que las añada el propio usuario, porque precisamente esta URL forma parte del hook que debemos utilizar:
add_action ('woocommerce_account_url-endpoint_endpoint', function () {
echo $contenido;
});
Recuerda utilizar la función do_shortcode() con el contenido si quieres permitir que se utilicen shortcodes.
Ponerle un título personalizado a la pestaña
En este punto ya tenemos la funcionalidad completa, aunque cuando el usuario pinche en esta pestaña el título seguirá siendo Mi cuenta. De nuevo, un desarrollador mediocre se quedaría ahí, pero nosotros no lo somos, así que queremos que la pestaña tenga su propio título, así que lo vamos a filtrar:
add_filter ('the_title', function ($titulo) {
if (isset ($wp_query->query_vars['url-endpoint']) && is_account_page() && is_main_query() && in_the_loop())
$titulo = 'Nombre de mi pestaña';
});
Antes de utilizar esta función recuerda que is_account_page() es una función de WooCommerce, así que asegúrate de comprobar que WooCommerce está activado antes de utilizarla, porque si no es así estarás generando un error.
Personalizar las pestañas de Mi cuenta mediante un plugin
Como has podido comprobar si has echado aunque sea un vistazo rápido a la sección que antecede a esta, habrás podido comprobar que añadir una pestaña personalizada a la sección Mi cuenta no es como copiar y pegar una función en functions.php.
Pero puedes hacerlo fácilmente con este plugin, que te permite añadir un número ilimitado de pestañas en la página de Mi cuenta, con el título y el contenido que quieras.
Al activarlo, crea una nueva opción Pestañas en el menú de administración de WordPress, con el que podrás añadir todas las pestañas que necesites, con su título y su contenido, de la misma forma que haces con las entradas o las páginas.
Estas pestañas pueden tener cualquier tipo de contenido: formularios, shortcodes, imágenes, enlaces… El editor con el que cuentan es el editor que WordPress utiliza para los posts.
Todas las pestañas que añadas mediante este gestor estarán disponibles para tus clientes en la página Mi cuenta, después de las pestañas que incluye WooCommerce por defecto, justo antes de la opción Cerrar sesión.
Este plugin es compatible con WPML, así que podrás tener las pestañas en los diferentes idiomas en que tengas la web.
Vídeo: crear pestañas personalizadas en la página Mi cuenta de WooCommerce
En este vídeo puedes ver su sencillo uso y el resultado:
