WooCommerce My Account Page Menu

How to add custom links to the WooCommerce Menu on Accounts Page.

WooCommerce as we all know is one of the most popular and widely used WordPress plugins to create and manage an online shop.

While it is super easy to set up the plugin using its amazing setup screen and very easy to use and understand setup interface, we can also customize the plugin to a great extent.

Today, we are going to learn how we can add custom links to the menu on My Account page.

By default, we have Dashboard, Orders, Addresses, Account details & Logout links in the menu and we are going to add a Support menu item just above Logout. As you can see in the image above.

Using Hooks

woocommerce_account_menu_items

The first hook we are going to use is ‘woocommerce_account_menu_items’. This hook takes 1 argument $menu_links, which holds an array of current menu items and we are going to append our custom link to that menu array, so be sure to return the $menu_links variable.

add_filter ( 'woocommerce_account_menu_items', 'add_support_link_my_account_page' );

function add_support_link_my_account_page( $menu_links ) {

    $new = array( 'support_link' => 'Support' ); // Your custom menu/link array

    $menu_links = array_slice( $menu_links, 0, -1, true ) + $new + array_slice( $menu_links, 1, NULL, true )

    return $menu_links;
}

In the above function, we are making use of PHP’s array_slice function twice.

First to slice out all the links before or except Logout, then join our custom links menu item and then join the rest of the menu. 

This would add our custom menu link just before the Logout item which by default in WooCommerce is the last item on the menu.

If you want to change the placement of your custom menu, try editing the array_slice function’s third parameter.

woocommerce_get_endpoint_url

Adding the menu items is not enough, as it won’t lead anywhere unless we add a link to it or unless we specify where this link to lead when someone clicks on it.

We can do that using the ‘woocommerce_get_endpoint_url’ hook in the following manner.

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

function add_support_link_my_account_page_endpoint( $url, $endpoint, $value, $permalink ) {
   if( $endpoint === 'support-link' ) {
    $url = 'https://link-to-your-page';
   }
   return $url;
}

The above function returns the URL for the newly added custom link to the menu. It has 4 parameters:

1. $url – URL of the page for the custom link.
2. $endpoint  – The endpoint to match in the array of links, which is the key of the array, In our case, it’s ‘support-link’
3. $value (optional) – The value of the endpoint.
4. $permalink(optional) – Permalink of the current page.

That’s it. I hope this helps someone. Let me know your thoughts or issues in the comments below.

Happy Coding!