¿Cómo agregar una nueva página a «mi cuenta» en WooCommerce?

En ocasiones nos podemos encontrar con la necesidad de agregar una nueva página en «mi cuenta» en nuestro WooCommerce. Puede ser para consultar opciones específicas del usuario, para agregar una Wishlist…

Vamos a ver cómo funciona esta sección de WooCommerce:

Lo primero que tenemos que hacer es crear un nuevo endpoint. Esto es una URL de WordPress a la que se podrá acceder.

add_action( 'init', 'DummyWeb_mi_endpoint_nuevo' );
function DummyWeb_mi_endpoint_nuevo() {
	add_rewrite_endpoint( 'mi-nueva-url', EP_ROOT | EP_PAGES );
}

NOTA: Debemos recordar que al escribir nuevas funciones en WordPress es muy recomendable (requisito si quieres publicar en el repositorio) empezar el nombre de todas las funciones con una cadena propia para evitar posibles funciones duplicadas por cualquier otro componente. En este caso uso el prefijo DummyWeb_.

A continuación se debe registrar la query-var para que sea reconocida desde la URL

add_filter( 'query_vars', 'DummyWeb_mi_propia_query_vars', 0 );
function DummyWeb_mi_propia_query_vars( $vars ) {
	$vars[] = 'mi-nueva-url';
	return $vars;
}

Una vez aquí debemos realizar un vaciado de URLs guardando los Enlaces Permanentes de WordPress. Si estamos desarrollando un tema o un plugin habrá que usar la función flush_rewrite_rules(); en la activación de este para que encuentre esta nueva URL.

Creando la opción del menú en «mi cuenta»

El siguiente paso sería crear la correspondiente opción de menú dentro de mi cuenta

add_filter( 'woocommerce_account_menu_items', 'DummyWeb_agregarOpcionMenuMiCuenta' );
function DummyWeb_agregarOpcionMenuMiCuenta( $items ) {
	// Quitamos la opción de logout.
	$logout = $items['customer-logout'];
	unset( $items['customer-logout'] );

	// Insertamos nuestra opción de menú.
	$items['mi-nueva-url'] = __( 'Nueva opción de menú', 'woocommerce' );

	// Volvemos a poner el logout.
	$items['customer-logout'] = $logout;

	return $items;
}

Esta función quita la opción de logout, agrega la nuestra y vuelve a agregar la opción de menú. Sin embargo en $items tenemos todas las opciones de menú y podríamos intercalar la nuestra donde queramos mediante array_slice()

Con esto tenemos creado el endpoint y agregada la opción al menú. Al crear el endpoint, WooCommerce automáticamente crea un hook que podremos usar. El formato del nombre del hook será woocommerce_account_ENDPOINT_endpoint siendo en nuestro ejemplo woocommerce_account_mi-nueva-url_endpoint

Y con esto podremos introducir el contenido que deseemos mediante una función llamada desde esta acción:

function Dummyweb_contenido_del_endpoint() {
 echo 'Contenido';
}

add_action( 'woocommerce_account_mi-nueva-url_endpoint', 'Dummyweb_contenido_del_endpoint' );

Por último podemos cambiar el título a esta sección mediante el filtro the_title de WordPress

function Dummyweb_mi_endpoint_title( $title ) {
  global $wp_query;

  $is_endpoint = isset( $wp_query->query_vars['woocommerce_account_mi-nueva-url_endpoint'] );

  if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
    $title = __( 'Título de la sección', 'woocommerce' );
    remove_filter( 'the_title', 'Dummyweb_mi_endpoint_title' );
  }
  return $title;
}

add_filter( 'the_title', 'Dummyweb_mi_endpoint_title' );

Con esto ya tendrás una nueva pestaña en la sección «Mi Cuenta» de WooCommerce. Solo falta que adaptes la función para añadir el contenido que desees mostrar.

¡Espero que este artículo haya sido de ayuda!