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.

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.

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

  • September 2, 2022 at 5:10 pm
    Permalink

    This looks promising!

    How would I add a shortcode to the content so it can pull dynamic content?

    For example, I’m using Learndash and want to display the users enrolled courses. There is a specific shortcode for this – but not sure how to add the do_shortcode to this 🙂

    Reply
    • September 3, 2022 at 1:07 am
      Permalink

      Thanks for reaching out. In that case, you can just add do_shortocde in step 4. For Leardash course list of the user:


      function add_new_item_content() {
      echo do_shortcode( '[ld_course_list]' );
      }

      I hope this helps!

      Reply
      • September 3, 2022 at 3:01 pm
        Permalink

        Thanks so much, greatly appreciated!

        Reply
          • September 6, 2022 at 11:57 am
            Permalink

            Hi again,

            So no problems with adding the new tab. However, when you click on the tab it redirects to 404 page. I have tried a few times to re-save the permalinks but still no luck.

            Any suggestions what might be causing this?

            Cheers,
            Leanne

            Reply
            • September 6, 2022 at 1:27 pm
              Permalink

              Hi Leanne,

              First, you can try by manually entering the URL yoursite.com/my-account/new-item just like yoursite.com/my-account/edit-profile where ‘my-account’ is WooCommerce account page endpoint.

              If you could see the page with that, it’s still the permalinks issue. In this case, you might need to flush the permalinks by resetting the .htaccess file.

              If you still see 404 when manually adding that URL, revise the added code snippet.

              Thank you!

              Reply
              • September 7, 2022 at 3:41 pm
                Permalink

                Thanks!

                Actually on reviewing the code again I had an error 🙂

                So this is now working.

                This is not covered here and I have searched high and low but hoping you may know – is there any way to replace the text on the my account dashboard tab content using a code snippet?

                I know you can copy the template but I don’t have the ability to have a child theme with my hosting setup.

                Reply
                • September 7, 2022 at 4:00 pm
                  Permalink

                  Yes, it’s the same 4th snippet above that you can use. Replace ‘new-item’ with ‘dashboard’.

                  You don’t need snippet 1,2,3 because ‘dashboard’ endpoint is registered by default. So, to only change the content, use only snippet 4 and adjust the texts accordingly.

        • September 6, 2022 at 2:23 am
          Permalink

          Hi Joe, In that case, there might be something wrong with the shortcode or additional code you might be using. Can you share the full snippet you’re using through the contact form, I’d be happy to help: https://sanjeebaryal.com.np/contact.

          Reply
  • September 7, 2022 at 2:08 am
    Permalink

    I need this very functionality, except I need to redirect to a separate landing page upon tab click, as I cannot embed the content in the content section.

    Reply
    • September 7, 2022 at 2:47 am
      Permalink

      Hi Richard, instead of adding contents, you can redirect to any URL from snippet 4. Example:

      function add_new_item_content() {
      wp_redirect( 'https://example.com' );
      exit();
      }

      Use wp_safe_redirect(‘/landing-page’); if you’re redirecting on the same domain.

      I hope this helps!

      Reply
      • January 8, 2023 at 12:58 am
        Permalink

        Tried this but the redirect keeps failing. It keeps redirecting to the same page: URL/my-account/my-lessons (which is not the page I want it to redirect to).

        PS: my-lessons is my new item

        How do I get it to actually redirect to the page I need it to?

        Reply
        • January 8, 2023 at 2:38 am
          Permalink

          I recommend reviewing your code snippets. Likely is there’s some issues with code snippets. Also, try refreshing the permalinks by going to Settings > Permalinks.

          If it doesn’t help, please share more details with the code snippets you’re using by submitting the support form: https://sanjeebaryal.com.np/support-form/

          I’ll try to reach out whenever possible.

          Reply
  • November 23, 2022 at 9:11 pm
    Permalink

    Hey Sanjeev!

    Get article, very helpful for setting up our custom account backend.

    One question, how can we add an icon for the new tab?

    Thank you in advanced,

    Reply
    • November 24, 2022 at 1:49 am
      Permalink

      Great question. Adding new icon to the account tab is just using CSS. Example below:

      .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link–new-item a:before {
      content: “\f4fe”;
      }

      Note the “new-item” term.

      Reply
  • December 8, 2022 at 2:34 am
    Permalink

    Your example to remove a My Account tab did not work for me. It kept giving an error on line 10 when activated in Code Snippets.

    I use this instead in WP 6.1.1 and WooCommerce 7.1.1

    add_filter(‘woocommerce_account_menu_items’, ‘remove_my_account_tabs’, 999);

    function remove_my_account_tabs($items) {
    unset($items[‘orders’]);
    unset($items[‘downloads’]);

    return $items;
    }

    Reply
    • December 8, 2022 at 2:53 am
      Permalink

      Hi Scott,

      That’s wrong character used. ‘ instead of ‘ – this maybe happening on the text editor you’re using.

      Officially: The character U+2018 “‘” could be confused with the character U+0060 “`”, which is more common in source code.

      Try this snippet instead:

      add_filter( ‘woocommerce_account_menu_items’, ‘remove_my_account_tabs’, 999);

      function remove_my_account_tabs($items) {

      unset( $items[‘orders’] );
      unset( $items[‘downloads’] );

      return $items;
      }

      I hope you understand.

      Reply
  • January 7, 2023 at 2:07 pm
    Permalink

    Great help! quick question
    how do I show users registered courses on the my account page, and how do I make the page unique to each user’s lesson?

    Reply
    • January 7, 2023 at 2:20 pm
      Permalink

      Thank you.

      To add any content, just add shortcode in step 4. Example:

      echo do_shortcode( ‘[ld_course_list]’ );

      Use the shortcode that applies to currently logged in user. Then, the will be automatically unique to each user. Refer to their shortcodes documentation.

      I hope this helps!

      Reply
  • February 3, 2023 at 2:28 pm
    Permalink

    Thanks for this tip. I was wondering how I can go about setting the Page Title which shows up at the top of all the My Account pages. My understanding is that I can use something like this:

    add_filter( ‘the_title’, ‘custom_title’, 10, 2 );
    function custom_title( $title, $id = null ) {
    global $post;
    // Detect that we are on a special page that needs to have its account name overwritten
    if( $post->post_type == ‘sales_listings’ && !is_user_logged_in() ) {
    $title = “Confidential”;
    }

    return $title;
    }

    but I haven’t figured out how to detect that I am on my custom page in order to change

    Reply
    • February 3, 2023 at 2:42 pm
      Permalink

      I’d think that “the_title” is executed too early to detect the new account tab and change its title. If it isn’t, you’d probably just check if $_GET[‘new-item’] is set.

      Reply
  • February 3, 2023 at 2:47 pm
    Permalink

    I figured out how to change the page title. Then name of my custom page is `publisher-dashboard`. First, I needed to add an additional link to set the woocommerce query vars:

    add_filter( ‘woocommerce_get_query_vars’, ‘publisher_dashboard_query_vars’ );
    function publisher_dashboard_query_vars( $vars ) {
    $vars[‘publisher-dashboard’] = ‘publisher-dashboard’;
    return $vars;
    }

    Then I did this:

    function publisher_dashboard_title( $title, $id = null ) {
    return __( “Publisher Dashboard”, “woocommerce” );
    }
    add_filter( ‘woocommerce_endpoint_publisher-dashboard_title’, ‘publisher_dashboard_title’, 10, 2 );

    Reply
  • March 10, 2023 at 1:23 am
    Permalink

    how can i add multiple custom tab to my account page ?

    Reply
    • March 10, 2023 at 2:27 am
      Permalink

      It’s the same steps you ‘ll follow with some modification in steps:

      Step 1:

      add_rewrite_endpoint( ‘new-item-1’, EP_ROOT | EP_PAGES );
      add_rewrite_endpoint( ‘new-item-2’, EP_ROOT | EP_PAGES );

      Step 2:
      $vars[] = ‘new-item-1’;
      $vars[] = ‘new-item-2’;

      Step 3:
      $items[‘new-item-1’] = ‘New Item 1’;
      $items[‘new-item-2’] = ‘New Item 2’;

      Step 4:
      Adjust accordingly. The hooks will be:

      woocommerce_account_new-item-1_endpoint
      woocommerce_account_new-item-2_endpoint

      Hope this helps!

      Reply

Leave a Reply

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