Menu Close

How to Add New Menu Items in the My Account Page in WooCommerce

default

If you are looking for a simple way to add new menu items within your My Account page in WooCommerce, here we will explain the straight forward way of adding this. In this method, we will be using two WooCommerce hooks that will take care of adding the menu item and then adding the redirect for the new page added with the respective URL.

In the example below, you will see we have added a few extra options and renamed a few of the links as well. We added a way to get back to the homepage, an additional link to add more courses and we renamed the logout button as shown below:

How to Remove Tabs from My Account Menu

Let’s go over everything, we’ll start with removing certain items that you don’t want to appear within the default WooCommerce links. So, let’s say we don’t use the Downloads option within your store, to remove this, we just need to unset the $menu_links and add the below code to our functions.php file:


add_filter ( 'woocommerce_account_menu_items', 'silva_remove_my_account_links' );
function silva_remove_my_account_links( $menu_links ){
 
    unset( $menu_links['downloads'] ); // Disable Downloads

    // If you want to remove any of the other default links, just uncomment out the items below:

    //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['edit-account'] ); // Remove Account details tab
	//unset( $menu_links['customer-logout'] ); // Remove Logout link
 
	return $menu_links;
 
}

But that’s not all, even though the menu link is removed, it is still accessible by going to the direct URL.

To achieve this, you can find all the default My Account subpages in WooCommerce > Settings > Account. All you need to do is just set a specific endpoint as an empty one.

How to Rename Tabs in My Account

This can be done with woocommerce_account_menu_items as well. All you need to know is the ID of the tab you would like to rename (we mentioned these above).

So let’s change the name of ‘Dashboard’ to Portal for example, we would add the following code in our functions.php file:


add_filter ( 'woocommerce_account_menu_items', 'silva_rename_downloads' );
 
function silva_rename_downloads( $menu_links ){
 
	// $menu_links['TAB ID HERE'] = 'NEW TAB NAME HERE';
	$menu_links['dashboard'] = 'Portal';
 
	return $menu_links;
}

How to Add My Account Menu Links with Custom URLs

Okay, so the part you’ve been waiting for right? There isn’t a filter as such but in the first part of the code, we will add a new element to the menu items array.

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


add_filter ( 'woocommerce_account_menu_items', 'silva_one_more_link' );
function silva_one_more_link( $menu_links ){
 
	// We will hook "sometext" later
	$new = array( 'sometext' => 'My New Item' );
 
	// 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', 'silva_hook_endpoint', 10, 4 );
function silva_hook_endpoint( $url, $endpoint, $value, $permalink ){
	if( $endpoint === 'sometext' ) {
		// Here is the place for your custom URL, it could be external
		$url = site_url();
	}
	return $url;
}

How to Add Custom My Account Menu Tabs with their Own Pages

This part consists of three parts, and this is how you add menu items with custom pages:


/*
 * Part 1. Add Link (Tab) to My Account menu
 */
add_filter ( 'woocommerce_account_menu_items', 'silva_log_history_link', 40 );
function silva_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;
 
}
/*
 * Part 2. Register Permalink Endpoint
 */
add_action( 'init', 'silva_add_endpoint' );
function silva_add_endpoint() {
 
	// WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation
	add_rewrite_endpoint( 'log-history', EP_PAGES );
 
}
/*
 * Part 3. Content for the new page in My Account, woocommerce_account_{ENDPOINT NAME}_endpoint
 */
add_action( 'woocommerce_account_log-history_endpoint', 'silva_my_account_endpoint_content' );
function silva_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.';
 
}

Note: Once you make this change, you will need to go to Settings > Permalinks and just click the Save Changes button.

And that’s all there is to it really! If you have found this useful, let us know! If you are struggling, drop a comment below and we’d love to assist you!

View Source
Posted in WooCommerce