WooCommerce My Account Menu

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:

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.

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.

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:

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.

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