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.

/156 comments
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.

More WooCommerce Posts

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 156

Leave a comment

php js HTML CSS Code