Want your own dashboard menu items? Just take a look on these woocommerce hook

Since WooCommerce v2.6.0, the My Account area in WooCommerce has utilised what is called “endpoints”. This means that there is only 1 page set up in WordPress (something like “/my-account”), and the subpages of that are dynamic loaded (like “/my-account/orders”). It’s a good method for WooCommerce to have implemented, as it means you do not need to manage as many pages in your WordPress admin; the contents of that page is loaded in dynamically based on the “endpoint” (“orders”, in our example).

This does make adding a new subpage to the My Account area a little more complicated, but it’s definitely possible! Take a look at how it’s done.

Note: I’ll be writing this in standard functions which you could add to your theme’s functions.php file, but I’d recommend creating a plugin for the functionality and doing it within a class.

Add An “Information” Link To The My Account Navigation

Firstly, let’s add an information link to the My Account navigation.

  • The woocommerce_account_menu_items filter accepts 1 parameter: an array of navigation items.
  • In the iconic_account_menu_item() we’re adding our “Information” link to the end of the $items array. We’re using a key/value pair; the array key is the endpoint URI (“information”), and the value is a translatable string of the link title (“Information”).

Add A “My Account” Endpoint

For this example, we’ll add a new page called “Information”, under the URI of my-account/information. This means our endpoint is simply information, as per our custom menu link above.

  • We’re adding a function called iconic_add_my_account_endpoint on the init action.
  • We’re using add_rewrite_endpoint() to add our endpoint. This will require you permalinks to be refreshed (just visit SettingsPermalinks).
  • add_rewrite_endpoint() accepts 2 parameters. The first is our endpoint URI, and the second is where the endpoint will be available. As “My Account” is a page, we’ve assigned our endpoint to EP_PAGES. You can view all available “Places” on the codex.

After this is added, the /my-account/information URL should return the normal account dashboard, and not a 404 page.

Add Content To Our New Endpoint

Rather than using a custom template, I think it’s better to use the hooks available. This way we can keep the default account layout, including the sidebar navigation. WooCommerce provide a custom hook for your endpoint, which can be accessed like so:

We’re using the woocommerce_account_information_endpoint action. This is a custom action that you can use for any endpoint you create by formatting it like so woocommerce_account_{your-endpoint-slug}_endpoint.

Add An “Is Endpoint?” Helper

It could be useful for us to add a helper function to check whether the currently viewed page is an endpoint. I couldn’t see any native functions in WordPress that do this (correct me if I’m wrong?), so I wrote this simple function for that purpose.

So now we can use if( iconic_is_endpoint('information') ) { ... } to check whether the current page is our endpoint. Note: You can pass any endpoint into the function.

Conclusion

That should get you started! There’s obviously a few lines of code to add, but once you’ve done it, it’s fairly straightforward to modify and evolve. Let me know if you use this tutorial on your WooCommerce site. I’d be interested to know what tabs you’ve added.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.