How to Add New Menu in MyAccount Page Woocommerce

Are you looking for a straightforward way to add new tab in my-account page in WooCommerce that can be implemented quickly and easily by any WooCommerce user irrespective of their level of skill? The quick solution to add new tab in my-account page entails adding two WooCommerce filter hooks that takes care of adding the menu and the other takes care of redirecting to the new page added to the respective URL.

Table of Contents

In this tutorial, I will show you how to exactly add a menu in WooCommerce my-account menu and then create a redirect filter to redirect the users to any page you prefer including an external redirection. So let get started by understanding how My-Account menu page works.

How MyAccount WooCommerce Page Menu Works

These tabs on WooCommerce are basically menus and it is possible to filter the content of that page and get the array that displays the menus then add the content to the array and return the content.

WooCommerce/WordPress Filter Hooks

If you have not worked with filters before, I wrote a detailed introduction to filter in this tutorial apply_filters and do_action where I mentioned how WordPress filters work.

Another good example is the filter we applied on the_content in this WordPress tutorial, to add content before or after the default WordPress post or page content.

Enough info about the filter hooks, now let us focus on how to add menu in my-account page in WooCommerce.

I like to start all my tutorials with a quick step by step summary to help you learn and understand what is happening in the code. I don’t like to just share the code and ask you to copy-paste without explaining what the code does. This is a good approach since readers can be more innovative and add more specific features to the code snippet.

Steps on How to Add New Tab in My-Account Page WooCommerce

To add a new tab in my-account page, it entails three steps that are as follows:

Create a filter hook to add the new tab in my-account page and the filter should gather all the data that is displayed on the menu and then push in your new data. (please remember that word PUSH, I will explain in more details later in this post)
Create a second filter that adds the URL redirect of the menu you added in the first step to the page you have created.
Add this code to your functions.php file in your theme or you can add this code to a plugin class or function and you will successfully add the new menu on my account page in WooCommerce.

Add Menu in My-Account Page in Woocommerce

In the last few days, a client requested me to add a new menu on my-account page in an existing WooCommerce site. Ideally, the menu was supposed to redirect to the Forum that we had added previously using BuddyPress.

In this tutorial, I want to presume this is the case and we will go ahead and add the menu to the My-Account page and it should redirect to the forum.

For a start, the image below indicates the final product of how I added the new tab in my-account page of this WooCommerce site and redirect the users to the Forum.

Add the First Filter to Add Menu to My-Account Page

The code to add new tab in my-account page includes a filter hook and a callback function as shown below:

//First hook that adds the menu item to my-account WooCommerce menu 

function example_forum_link( $menu_links ){
 
	// we will hook "womanide-forum" later
	$new = array( 'example-forum' => 'Forum Example' );
 
	// 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_account_menu_items', 'example_forum_link' );

When you add this code to functions.php you should see the new menu on my account page as shown in the image below:

How the Code Works

In this filter we are using the $menu_links variable we pass to the callback function to obtain all the menus on my-account page in an array.
After we get the array of menu links we use array_slice() function to extract and then PUSH in our new menu item then we all the menus in one array and attach to the woocommerce_account_menu_items WooCommerce hook.
At this point, the menu item is now displayed on my account menu

As you can see the filter has added the new menu on the default my-account menu. When you click on the menu, you will be redirected to a 404 page since the redirect on this new menu item is now working as shown on the image below:

This page does not exist on the WooCommerce dashboard but you can see the slug example-forum, we added in the first filter and we will use it in the second filter to redirect to the forum page.

Add Second Filter to Add Menu to My-Account Page

As mentioned above the second filter will add the page that we want to redirect this menu and in this case, we can add it using the code shown below:

// Second Filter to Redirect the WooCommerce endpoint to custom URL
function forum_example_hook_endpoint( $url, $endpoint, $value, $permalink ){
 
	if( $endpoint === 'example-forum' ) {
	   
		// This is where you add the custom URL, it could be external like, in this case, we need to go to my profile on the bbpress froum
		// I will use this function (bp_core_get_username( bp_loggedin_user_id() );) to get my profile user id and add it to the URL as shown below 
		
		$url = site_url() .'/members/' . bp_core_get_username( bp_loggedin_user_id() );
 
	}
	return $url;
 
}


add_filter( 'woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4 );

When you add this code just below the first filter we added in the step above, your Forum Example menu should redirect to the specific user profile as shown in the image below where I have redirected to my profile on the BBPress forum.

Complete Code Snippet to Add New Tab in My-Account Page and Redirect to Any Page

To add the new menu to my account page menu in WooCommerce, you should add the full code snippet shared below, in your functions.pfp file of your theme and replace the variables with your respective slug and page where you want to redirect the menu.

//First hook that add the menu item to my-account WooCommerce menu 

function example_forum_link( $menu_links ){
 
	// we will hook "womanide-forum" later
	$new = array( 'example-forum' => 'Forum Example' );
 
	// 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_account_menu_items', 'example_forum_link' );


// Second Filter to Redirect the WooCommerce endpoint to custom URL
function forum_example_hook_endpoint( $url, $endpoint, $value, $permalink ){
 
	if( $endpoint === 'example-forum' ) {
	   
		// This is where you add the custom URL, it could be external like in this case we need to go to my profile on the bbpress froum
		// I will use this function (bp_core_get_username( bp_loggedin_user_id() );) to get my profile user id and add it to the URL as shown below 
		
		$url = site_url() .'/members/' . bp_core_get_username( bp_loggedin_user_id() );
 
	}
	return $url;
 
}


add_filter( 'woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4 );

Wrapping Up

Creating a new menu tab in my-account page on WooCommerce should not be a challenge anymore after reading this tutorial. I have explained in a step by step and with a practical example on how to add a new tab in my-account page and create a redirect to a page of your choice. I have also written other tutorials on how to add WooCommerce redirect after checkout and WooCommerce redirect after registration. If you are not able to implement this solution, you can seek the assistance of a professional WooCommerce developer.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Add New Menu in MyAccount Page Menu in Woocommerce