←Volver al Blog

Cómo añadir/eliminar/actualizar las pestañas en la página Mi Cuenta de WooCommerce

2022-02-05•3 min de lectura

El plugin de WooCommerce tiene disponible el shortcode [woocommerce_my_account] que se puede incrustar en cualquier página para mostrar a los clientes conectados toda la información relacionada con sus pedidos anteriores, direcciones, detalles de pago y más, según los plugins que pueda tener instalados en el sitio. El shortcode muestra los datos organizados por pestañas y contenido único en cada una, como puede ver en la siguiente imagen:

Página Mi Cuenta por defecto

¿Cómo podemos eliminar, alterar o añadir nuevas pestañas?

Sí, una opción es usar un plugin existente y la otra es escribir unas pocas líneas de PHP. A continuación, proporcionaré algunos fragmentos de PHP para que pueda añadirlos a su archivo functions.php y realizar las personalizaciones necesarias. Estamos utilizando los siguientes hooks de filtro de WordPress woocommerce_account_menu_items y woocommerce_get_endpoint_url

Eliminar pestañas

/**
 * Elimina el enlace de pre-pedidos de la página Mi Cuenta.
 * @param $menu_links
 * @return array|string[]
 */
function my_site_remove_my_account_links( $menu_links ) {
    // Elimina la pestaña de pre-pedidos de la página de mi cuenta.
    // Esta pestaña es creada por el plugin https://woocommerce.com/products/woocommerce-pre-orders/
    unset( $menu_links['pre-orders'] );
    // A continuación, puede encontrar las pestañas predeterminadas.
    //unset( $menu_links['dashboard'] ); // Elimina la pestaña Panel.
    //unset( $menu_links['orders'] ); // Elimina la pestaña Pedidos.
    //unset( $menu_links['edit-address'] ); // Pestaña Direcciones.
    //unset( $menu_links['payment-methods'] ); // Elimina la pestaña Métodos de pago.
    //unset( $menu_links['edit-account'] ); // Elimina la pestaña Detalles de cuenta.
    //unset( $menu_links['customer-logout'] ); // Elimina el enlace de cierre de sesión.
    return $menu_links;
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_remove_my_account_links' );

Actualizar los títulos de las pestañas

/**
 * Actualiza el título de las pestañas en la página Mi Cuenta.
 * @param $menu_links
 * @return array|string[]
 */
function my_site_update_my_account_links( $menu_links ) {
    // Actualiza el texto de la pestaña de pedidos.
    $menu_links['orders'] = __('Mis Pedidos Anteriores');
    // A continuación, puede encontrar las pestañas predeterminadas.
    // $menu_links['dashboard'] = __('Tu Texto Personalizado del Panel'); // Actualiza el título de la pestaña Panel.
    // $menu_links['edit-address'] = __('Tu Texto Personalizado de Direcciones'); // Actualiza el título de la pestaña Direcciones.
    // $menu_links['payment-methods'] =__('Tu Texto Personalizado de Métodos de Pago'); // Actualiza el título de la pestaña Direcciones.
    // $menu_links['edit-account'] = __('Tu Texto Personalizado de Cuenta'); // Actualiza el título de la pestaña Direcciones.
    // $menu_links['customer-logout'] = __('Tu Texto Personalizado de Cierre de Sesión'); // Actualiza el título de la pestaña de cierre de sesión.
    return $menu_links;
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_update_my_account_links' );

Añadir una pestaña personalizada, que enlace a una URL interna/externa

/**
 * Añade un nuevo enlace personalizado a la página Mi Cuenta.
 * @param $menu_links
 * @return array|string[]
 */
function my_site_add_my_account_links( $menu_links ) {
    // Descomenta estas líneas si quieres mostrar la nueva pestaña solo a un rol determinado.
    // Obtiene el usuario actual.
    // $user = wp_get_current_user();
    // if ( !in_array( 'MY_ROLE', (array) $user->roles ) ) {
    //  return $menu_links;
    // }
    // customendpoint será enganchado desde el filtro woocommerce_get_endpoint_url.
    $new = [ 'customendpoint' => __('Mi nueva pestaña') ];
    return array_slice( $menu_links, 0, 1, true )
            + $new
            + array_slice( $menu_links, 1, NULL, true );
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_add_my_account_links' );
/**
 * Establece la URL para el endpoint customendpoint creado en woocommerce_account_menu_items
 * @param $url
 * @param $endpoint
 * @param $value
 * @param $permalink
 * @return mixed|string
 */
function my_site_custom_endpoint( $url, $endpoint, $value, $permalink ) {
    if ( $endpoint === 'customendpoint' ) {
        $url = '/internal-url/';
        // También puedes tener una URL externa.
        // $url = 'https://davidloor.com';
    }
    return $url;
}
add_filter( 'woocommerce_get_endpoint_url', 'my_site_custom_endpoint', 10, 4 );

Para una explicación completa sobre la página Mi Cuenta de WooCommerce, puede visitar:
https://woocommerce.com/document/the-my-account-page/

Categorías:

WooCommerce