Como añadir pestañas personalizadas al menú en mi cuenta Woocommerce

Añade pestañas personalizadas al menú en Mi Cuenta Woocommerce

Suscríbete al canal de Youtube

Puedes agregar pestañas personalizadas en el menú de tu cuenta en WooCommerce mediante el uso de un plugin de terceros o mediante la adición de código personalizado. Aquí te describo algunos ejemplos:

  1. Usando un plugin: Puedes utilizar un plugin como «WooCommerce Custom Account Pages» o «Custom My Account for WooCommerce» para añadir pestañas personalizadas en el menú de tu cuenta. Estos plugins te permiten crear nuevas páginas y asignarlas como pestañas en el menú de tu cuenta.

  2. Usando código personalizado: Puedes añadir pestañas personalizadas en el menú de tu cuenta mediante la adición de código personalizado a tu archivo functions.php. Aquí te dejo un ejemplo de código que puedes utilizar:

				
					/**
 * Plugin Name: WooCommerce Custom My Account Tabs
 * Description: Añade pestañas personalizadas a la página "Mi cuenta" en WooCommerce.
 * Author: juancor
 * Author URI: https://juancor.com
 * Version: 1.0
 */

// Añadir una nueva pestaña en la página "Mi cuenta"
function custom_my_account_menu_items( $items ) {
    $items = array(
        'dashboard'         => __( 'Dashboard', 'woocommerce' ),
        'orders'            => __( 'Orders', 'woocommerce' ),
        'downloads'         => __( 'Downloads', 'woocommerce' ),
        'edit-address'      => __( 'Addresses', 'woocommerce' ),
        'payment-methods'   => __( 'Payment Methods', 'woocommerce' ),
        'custom-tab'        => __( 'Custom Tab', 'woocommerce' ),
        'edit-account'      => __( 'Account Details', 'woocommerce' ),
        'customer-logout'   => __( 'Logout', 'woocommerce' ),
    );
    return $items;
}
add_filter( 'woocommerce_account_menu_items', 'custom_my_account_menu_items' );
				
			

Con este código se añade una pestaña llamada «Custom Tab» en el menú de la cuenta, tu puedes poner el nombre que necesites o añadir cuantas pestañas quieras. Es importante que tenga en cuenta que después de añadir una pestaña personalizada, necesita crear una página para esa pestaña y asignarla en su plugin o en su código.

Ten en cuenta que cualquier cambio en el código o en la configuración de tu sitio puede afectar el funcionamiento de tu tienda, por lo que te recomendamos hacer una copia de seguridad antes de realizar cualquier cambio.

Crear página o utilizar una existente y enlazarla a nuestra nueva pestaña

Para crear una página para una pestaña personalizada en el menú de la cuenta de WooCommerce y asignarla en el código, puedes seguir estos pasos:

  1. Crea una nueva página en tu sitio WordPress. Puedes hacerlo desde el panel de administración, haciendo clic en «Páginas» y luego en «Añadir nueva».

  2. Asigna un título y contenido a la página. Puedes utilizar cualquier contenido que desees mostrar en la pestaña personalizada.

  3. Obtén el ID de la página recién creada. Puedes hacerlo visitando la lista de páginas en el panel de administración y buscando la página recién creada. El ID se encuentra en la columna «ID» de la tabla.

  4. Agrega el código siguiente en tu archivo functions.php para asignar la página creada a la pestaña personalizada:

				
					/**
 * Plugin Name: WooCommerce Custom My Account Tabs
 * Description: Añade pestañas personalizadas a la página "Mi cuenta" en WooCommerce.
 * Author: juancor
 * Author URI: https://juancor.com
 * Version: 1.0
 */

// Añadir una nueva pestaña en la página "Mi cuenta"
function custom_my_account_endpoints() {
    add_rewrite_endpoint( 'custom-tab', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'custom_my_account_endpoints' );

function custom_tab_content() {
    if( ! is_user_logged_in() ) {
        return;
    }
    $custom_tab_page_id = YOUR_PAGE_ID;
    $page = get_post( $custom_tab_page_id );
    if ( $page ) {
        echo apply_filters( 'the_content', $page->post_content );
    }
}
add_action( 'woocommerce_account_custom-tab_endpoint', 'custom_tab_content' );

				
			

Reemplaza «YOUR_PAGE_ID» en la línea 10 con el ID de la página que creaste en el paso 2.

Ahora, cuando un usuario inicie sesión en tu sitio y visite su página de cuenta, verá la pestaña personalizada en el menú y al hacer clic en ella, se mostrará el contenido de la página que asignaste.

Cómo asignarle estilos a las pestañas de mi cuenta woocommerce

Para darle estilos a tu pestaña personalizada en el menú de tu cuenta de WooCommerce para que se vea más bonita y profesional, puedes utilizar varios métodos, aquí te describo algunos:

  1. Utilizando hojas de estilo: Puedes crear un archivo de hoja de estilo CSS y agregarlo a tu sitio mediante la adición de código en tu archivo functions.php o mediante el uso de un plugin de personalización de estilo como «Simple Custom CSS». Puedes utilizar selectores CSS para seleccionar la pestaña personalizada y aplicar estilos como tamaño de fuente, color de fondo, etc.

Para crear una hoja de estilo CSS y asignarla a tu pestaña personalizada en el menú de tu cuenta de WooCommerce, puedes seguir estos pasos:

  1. Crea un archivo de hoja de estilo CSS. Puedes hacerlo utilizando un editor de texto como Notepad o Sublime Text. Asegúrate de guardar el archivo con la extensión «.css» (por ejemplo, «custom-account-style.css»).

  2. Agrega tus reglas de estilo. Puedes utilizar selectores CSS para seleccionar la pestaña personalizada y aplicar estilos. Por ejemplo, si tu pestaña personalizada tiene el ID «custom-tab», puedes utilizar el siguiente selector para aplicar estilos:

				
					.woocommerce-MyAccount-navigation-link {
    padding: 10px;
    font-size: 16px;
    background-color: #F1F1F1;
    color: #333333;
}

.woocommerce-MyAccount-navigation-link.is-active {
    background-color: #e5e5e5;
    color: #000;
    font-weight: bold;
}




				
			
  1. Guarda el archivo en tu servidor. Puedes guardar el archivo en la carpeta «wp-content/themes/[your-theme-name]/». Si no tienes una carpeta «css» en tu tema, puedes crear una.

  2. Añade el código siguiente en tu archivo functions.php para enlazar el archivo de hoja de estilo CSS a tu sitio:

				
					/**
 * Plugin Name: WooCommerce Custom My Account Tabs
 * Description: Añade pestañas personalizadas a la página "Mi cuenta" en WooCommerce.
 * Author: juancor
 * Author URI: https://juancor.com
 * Version: 1.0
 */

// Añadir una nueva pestaña en la página "Mi cuenta"
function custom_my_account_styles() {
    wp_enqueue_style( 'custom-account-style', get_stylesheet_directory_uri() . '/custom-account-style.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_my_account_styles' );

				
			

En este ejemplo, se está cargando el archivo «custom-account-style.css» que está en la carpeta del tema activo. Si lo guardaste en una carpeta css, es necesario especificar la ruta correcta en el código.

Ten en cuenta que es importante guardar una copia de seguridad de tu sitio antes de realizar cualquier cambio en el código.

Espero que esto ayude a darle un estilo moderno a tus pestañas de la cuenta de tu tienda en WooCommerce.

¡Tu voz importa! Cuéntame qué videos te gustaría ver

También puede ser de tu interés