Heads up! This article contains PHP code and is intended for developers. If you want to add new custom tabs on the WooCommerce account page without any code, I recommend checking out the Customize My Account Page for WooCommerce Plugin. The plugin allows you to add any number of custom tabs, sort tabs, customize design, and more.

WooCommerce by default adds the following items to the account page:

  • Dashboard
  • Orders
  • Downloads
  • Addresses
  • Account details
  • Logout


If you want to add a new item to the WooCommerce account page, you can use the following ready-to-use 4 code snippets in your theme’s (preferably child theme’s) functions.php file. Note that you’ll need to add all 4 code snippets below. Categorization is only for readability. Here are other ways of adding custom code snippets to your site.


1. Registering new item endpoint

* Change “new_item” and “new-item” to your preferred item name.

add_action( 'init', 'register_new_item_endpoint');

/**
 * Register New Endpoint.
 *
 * @return void.
 */
function register_new_item_endpoint() {
	add_rewrite_endpoint( 'new-item', EP_ROOT | EP_PAGES );
}


2. Query Vars

* Change “new_item” and “new-item” to your preferred item name.

add_filter( 'query_vars', 'new_item_query_vars' );

/**
 * Add new query var.
 *
 * @param array $vars vars.
 *
 * @return array An array of items.
 */
function new_item_query_vars( $vars ) {

	$vars[] = 'new-item';
	return $vars;
}


3. Add New Item

* Change “new_item”, “new-item”, “New Item” to your preferred item name.

add_filter( 'woocommerce_account_menu_items', 'add_new_item_tab' );

/**
 * Add New tab in my account page.
 *
 * @param array $items myaccount Items.
 *
 * @return array Items including New tab.
 */
function add_new_item_tab( $items ) {

	$items['new-item'] = 'New Item';
	return $items;
}


4. Add Contents To The New Item

* Change “new_item” and “New Item Contents here!” to your preferred item and its contents.

add_action( 'woocommerce_account_new-item_endpoint', 'add_new_item_content' );

/**
 * Add content to the new tab.
 *
 * @return  string.
 */
function add_new_item_content() {
	echo 'New Item Contents here!';
}


Once you’ve added these snippets, make sure to refresh the permalinks by going to Settings > Permalinks.


That’s it. I hope you found this helpful.

If you want to add a ‘Delete Account’ tab on the accounts page to allow users to delete their own accounts, you do not need to use any code snippets. There’s a built-in plugin WP Frontend Delete Account for you and more details on how to allow users to delete their own accounts.


WooCommerce account page
Output from the Twenty Twenty One theme





FAQ

How can I reorder WooCommerce account items?

/**
 * Reorder account items.
 * 
 * @return array Ordered Items.
 */
function reorder_account_menu( $items ) {
    return array(
	        'dashboard'          => __( 'Dashboard', 'woocommerce' ),
	        'orders'             => __( 'Orders', 'woocommerce' ),
	        'downloads'          => __( 'Downloads', 'woocommerce' ),
	        'edit-account'       => __( 'Edit Account', 'woocommerce' ),
	        'new-item'           => __( 'New Item', 'woocommerce' ),
	        'edit-address'       => __( 'Addresses', 'woocommerce' ),
	        'customer-logout'    => __( 'Logout', 'woocommerce' ),
    );

}
add_filter ( 'woocommerce_account_menu_items', 'reorder_account_menu' );

This puts “New Item” before the “Edit Addresses” and “Logout” Items.

How can I remove WooCommerce account items?

The same filter hook “woocommerce_account_menu_items” can be used to remove the WooCommerce account items. Following is the example of disabling the Edit Account tab.

/**
 * Remove Edit Account tab.
 * 
 * @return array Items.
 */
function remove_edit_account_tab( $items ) {

    unset( $items['edit-account'] );
    return $items;
}
add_filter ( 'woocommerce_account_menu_items', 'remove_edit_account_tab' );

If you want to remove other items, check their endpoints above.

How can I rename WooCommerce account items?

The same filter hook “woocommerce_account_menu_items” can be used to rename the WooCommerce account items. Following is the example of renaming the Dashboard tab.

/**
 * Rename Dashboard tab.
 * 
 * @return array Items.
 */
function rename_account_dashboard( $items ) {

    $items['dashboard'] = "Home";
    return $items;
}
add_filter ( 'woocommerce_account_menu_items', 'rename_account_dashboard' );

Did you know? In order to increase product growth there are 5 simple steps to get started. Follow SaaS Space to know more.

Don’t miss out on 50% discount on WooCommerce Customer Journey plugin.

Do you also want to add custom product tabs in WooCommerce? There it is.

Happy developing. 😊

If you faced any issues or have any questions regarding the code snippets, let me know in the comments. I’ll be happy to help! Else, give this article a LIKE.

Add a new custom tab on the WooCommerce account page
Tagged on:

Sanjeev Aryal

Don't bury your thoughts, put your vision into reality ~ Bob Marley.

34 thoughts on “Add a new custom tab on the WooCommerce account page

  • May 15, 2024 at 9:26 pm
    Permalink

    ok the code works fine, but the new content displays on a page by itself. How do I keep the WooCommerce Account menu on the right hand side to it behaves like the other tabs?

    Reply
    • May 16, 2024 at 11:51 am
      Permalink

      Hi – I’m not sure what you’re explaining. Can you please share the screenshot?

      The new tab should behave like the existing tabs.

      Reply
  • August 14, 2023 at 12:15 pm
    Permalink

    Filter ‘query_vars’ don’t worked at me. I had to change it to ‘woocommerce_get_query_vars’ and it started working.

    Reply
  • July 16, 2023 at 10:00 am
    Permalink

    The Tab is added, but it always shows the content of the Dashboard:
    Did i make a mistake?

    add_action( ‘init’, ‘register_kapsel_tab_endpoint’);

    /**
    * Register New Endpoint.
    *
    * @return void.
    */
    function register_kapsel_tab_endpoint() {
    add_rewrite_endpoint( ‘kapsel-tab’, EP_ROOT | EP_PAGES );
    }

    add_filter( ‘query_vars’, ‘kapsel_tab_query_vars’ );

    /**
    * Add new query var.
    *
    * @param array $vars vars.
    *
    * @return array An array of items.
    */
    function kapsel_tab_query_vars( $vars ) {

    $vars[] = ‘kapsel-tab’;
    return $vars;
    }

    add_filter( ‘woocommerce_account_menu_items’, ‘add_kapsel_tab_tab’ );

    /**
    * Add New tab in my account page.
    *
    * @param array $items myaccount Items.
    *
    * @return array Items including New tab.
    */
    function add_kapsel_tab_tab( $items ) {

    $items[‘kapsel-tab’] = ‘Meine Zeitkapseln’;
    return $items;
    }

    add_action( ‘woocommerce_account_kapsel_tab_endpoint’, ‘add_kapsel_tab_content’ );

    /**
    * Add content to the new tab.
    *
    * @return string.
    */
    function add_kapsel_tab_content() {
    echo ‘Hier kommen die Kapsel hin’;
    }

    Reply
    • July 16, 2023 at 1:57 pm
      Permalink

      here woocommerce_account_kapsel_tab_endpoint

      it should be kapsel-tab and not kapsel_tab.

      hope this helps!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *