WooCommerce My Account Menu

When I faced with My Account menu first time, my client asked me to add a custom link to it. I was surprised that this task was not so simple as it sounds.

#WooCommerce, #myaccount  /    /   169

WooCommerce Default My Account menu.
This is how “My Account” menu looks by default.

How to Remove Tabs from My Account menu. How to Remove their Endpoints as well and Make the Appropriate Pages to Return 404. #

Probably, it is the most easiest part of this tutorial. For example let’s imagine that our e-commerce shop doesn’t sell physical goods – and in that case maybe we do not need Addresses section (yes, I know that Billing Address details are also there, but we’re just learning now). Or maybe you want to remove Downloads from WooCommerce my account menu. Both are possible.

add_filter ( 'woocommerce_account_menu_items', 'misha_remove_my_account_links' );
function misha_remove_my_account_links( $menu_links ){
 
	unset( $menu_links['edit-address'] ); // Addresses
 
 
	//unset( $menu_links['dashboard'] ); // Remove Dashboard
	//unset( $menu_links['payment-methods'] ); // Remove Payment Methods
	//unset( $menu_links['orders'] ); // Remove Orders
	//unset( $menu_links['downloads'] ); // Disable Downloads
	//unset( $menu_links['edit-account'] ); // Remove Account details tab
	//unset( $menu_links['customer-logout'] ); // Remove Logout link
 
	return $menu_links;
 
}

I hope you know where to insert all the code from this post, if not – to functions.php. The result:

WooCommerce My Account menu with removed Addresses link.

It was simple enough, but we have not finished yet, if you go to /my-account/edit-address/ directly, it will show you Addresses page. This should not happen, should it?

The first thought that came to my mind was to remove endpoints somehow. Dealing with $wp_rewrite or something like that. Please do not!

The above code is good. But when you want to remove both the menu item and its page as well, you do not need any coding. You can find all the default My Account subpages in WooCommerce > Settings > Account. All you need is just to set a specific endpoint empty.

WooCommerce Edit My Account Endpoints in Settings

How to Rename Tabs in My Account #

Can be done with the same woocommerce_account_menu_items, all you need is to know a tab ID you would like to rename, all of them were mentioned above.

add_filter ( 'woocommerce_account_menu_items', 'misha_rename_downloads' );
 
function misha_rename_downloads( $menu_links ){
 
	// $menu_links['TAB ID HERE'] = 'NEW TAB NAME HERE';
	$menu_links['downloads'] = 'My Files';
 
	return $menu_links;
}

The same way you can rename any menu item you want 👍

Add My Account Menu Links with Custom URLs #

There is no specific filter for that but I will show you a very simple trick. In the first part of the code we will add a new element to menu items array (if you have experience with adding columns to admin Dashboard earlier, this code will be familiar to you).

In the second part of the code we’ll just hook its URL.

add_filter ( 'woocommerce_account_menu_items', 'misha_one_more_link' );
function misha_one_more_link( $menu_links ){
 
	// we will hook "anyuniquetext123" later
	$new = array( 'anyuniquetext123' => 'Gift for you' );
 
	// or in case you need 2 links
	// $new = array( 'link1' => 'Link 1', 'link2' => 'Link 2' );
 
	// array_slice() is good when you want to add an element between the other ones
	$menu_links = array_slice( $menu_links, 0, 1, true ) 
	+ $new 
	+ array_slice( $menu_links, 1, NULL, true );
 
 
	return $menu_links;
 
 
}
 
add_filter( 'woocommerce_get_endpoint_url', 'misha_hook_endpoint', 10, 4 );
function misha_hook_endpoint( $url, $endpoint, $value, $permalink ){
 
	if( $endpoint === 'anyuniquetext123' ) {
 
		// ok, here is the place for your custom URL, it could be external
		$url = site_url();
 
	}
	return $url;
 
}

But what about the menu icon?

If you use WooCommerce StoreFront theme, this question could appear in your mind. Really, how to add your own beautiful icon there?

Let’s begin with the point that StoreFront uses Font Awesome icon collection. So, go to their official website, choose any icon and find its unicode code.

Font Awesome: Where to find icon unicode string.

Once you found it, use it in CSS:

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--anyuniquetext123 a:before{
	content: "\f1fd"
}

This is how My Account menu looks for me now:

Here we added custom My Account menu link with its own icon.
Custom tabs in WooCommerce My Account

Add Custom My Account Menu Tabs with their Own Pages #

Well, this part of the tutorial is also simple enough and consists of 4 steps. Sometimes people forget about 4th step, but it is as much important as the others.

So, here is how to add additional menu items with custom pages:

/*
 * Step 1. Add Link (Tab) to My Account menu
 */
add_filter ( 'woocommerce_account_menu_items', 'misha_log_history_link', 40 );
function misha_log_history_link( $menu_links ){
 
	$menu_links = array_slice( $menu_links, 0, 5, true ) 
	+ array( 'log-history' => 'Log history' )
	+ array_slice( $menu_links, 5, NULL, true );
 
	return $menu_links;
 
}
/*
 * Step 2. Register Permalink Endpoint
 */
add_action( 'init', 'misha_add_endpoint' );
function misha_add_endpoint() {
 
	// WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation
	add_rewrite_endpoint( 'log-history', EP_PAGES );
 
}
/*
 * Step 3. Content for the new page in My Account, woocommerce_account_{ENDPOINT NAME}_endpoint
 */
add_action( 'woocommerce_account_log-history_endpoint', 'misha_my_account_endpoint_content' );
function misha_my_account_endpoint_content() {
 
	// of course you can print dynamic content here, one of the most useful functions here is get_current_user_id()
	echo 'Last time you logged in: yesterday from Safari.';
 
}
/*
 * Step 4
 */
// Go to Settings > Permalinks and just push "Save Changes" button.

I also took care of the icon.

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--log-history a:before{
	content: "\f1da";
}

Now, if you go to /my-account/log-history/ or click the appropriate menu item, this page should appear.

Custom My Account menu element with its own page.

Actually this is all I wanted to show you, but below is a small bonus.

Two WordPress Action Hooks that Allows to Add Any Content Before and After WooCommerce My Account Menu #

So, using the action hooks below you can add any text or HTML code just before and just after the menu <nav> element.

<?php
add_action('woocommerce_before_account_navigation', 'misha_some_content_before');
function misha_some_content_before(){
	echo 'blah blah blah before';
}
 
add_action('woocommerce_after_account_navigation', 'misha_some_content_after');
function misha_some_content_after(){
	?>
	<p>blah blah blah after</p>
	<?php
}

But I want you to keep in mind one thing – this may not be so simple as it seems, because in most cases the My Account <nav> element has float:left CSS property.

Thank you for reading! Subscribe below if you want to receive new awesome WordPress and WooCommerce-related content once a week. Or leave a comment if you still have unanswered questions.

Misha Rudrastyh
About the author Misha Rudrastyh

Passionate about WordPress and snowboarding, creating websites for over 10 years! Let's work together — just contact me.

If you are a developer too, subscribe to my facebook page.

Comments 169

← Older
  • Hi Misha thanks pretty much for this post. Happy New Year to you

    Can we do pagination on the pages of my account? Example I have done one page with name
    /my-account/sale

    There I get all products with the sale page and I need to get also

    /my-account/sale/page/2
    /my-account/sale/page/3

    And etc
    Do you have any thoughts on this? =)

    • Happy New Year! 🎄🙃

      You definitely can do it with the URLs like this /my-account/sale/?page=2, not sure if it is possible to add one more rewrite endpoint with add_rewrite_endpoint().

      • Thanks for your reply!
        Maybe someone will be interested in how to do it.

        All as in your manual, except for the pair of moments.

        First we have to create and include our file, coz the raw code inside won’t work for the pagination.

        function woo_my_account_sale_endpoint_content() {
            include 'woocommerce/myaccount/sale.php'; 
        }
        add_action( 'woocommerce_account_sale_endpoint', 'woo_my_account_sale_endpoint_content' );

        Second we need to create own query variable

        function woo_custom_register_query_var( $vars ) {
            $vars[] = 'sale'; 
            return $vars;
        }
        add_filter( 'query_vars', 'woo_custome_register_query_var' );

        And then we can catch out query and to use in the pagination like in an usually loop =)

  • Simon Richards

    Hi Misha
    For some reason I can’t find the account endpoints anywhere in the Woocommerce plugin. When I go the Accounts & Privacy tab it’s no where to be seen. Any idea where it might be?

    Many thanks

  • Nice article. Really helpful.

  • Thanks for the easy css to add Font Awesome icons to My Account!

Comments are closed.
If you need my personal help, please contact me. Contact me