Add a Custom Page to the "My Account" Area in WooCommerce

Want custom account pages right now?

Try the 14-day free trial of WooCommerce Account Pages and build up your account area using the WordPress pages interface.

Get Free Trial

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.

Looking for an easier solution?

Simply install WooCommerce Account Pages and build up your account area using WordPress subpages.

Get Free Trial

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.

Leave a Reply

33 Comments on "Add a Custom Page to the “My Account” Area in WooCommerce"

avatar
  Subscribe  
newest oldest most voted
Notify of
cuqpon
Guest

Why don`t just use this hook, instead of endpoint checking on template redirect 🙂

add_action( ‘woocommerce_account_SLUGHERE_endpoint’, function(){
echo ‘hello’;
} );

Osber Bermúdez
Guest

what is the right way to add css to the iconic_information_endpoint_content function?

Bakhash 2677
Guest

Hi
Thank you ! very useful
How could i get customer info like name email … ?

Bakhash 2677
Guest

i got it

Geetha Lakshmi
Guest

Hi, this is very good post, here i want to add sub menu items, can u pls give idea for it

Scott J Freeman
Guest

Fair warning for anyone using this… I added these code snippets to my child theme’s functions.php file and my entire site went to a 500 error. This was on a local dev environment and I’m still trying to fix it… it won’t even let me re-enable WooCommerce anymore due to some fatal error for “allowed memory size” and is referencing wp-includesfunctions.php even AFTER removing this code.

Scott J Freeman
Guest

Update: Fixed the issue. Turns out ALL of my local sites went offline (500 error) due to PHP freaking out about memory limit. I had to change this in php.ini
memory_limit = 256M
Seems like a big jump for a small addition.

coachasymi
Guest

Great & easy tut, even for somebody without much experience in code like me! A question though, can you call / display in the Information tab a content from another page instead of “Your new content” that have to be manually put under function iconic_information_endpoint_content() ? Cause it would be great if we could do that.

Aleksandr Kh
Guest

Thanks)

yusra
Guest

when i use this echo apply_filters( ‘the_content’, get_post_field( ‘post_content’, 42 ) ); the respective page opens.(named : customer) But I have applied a self created template on page customers that does not work.
on the other hand if I don’t add page customer as a tab it works perfect and template shows the respective data

Isaías Subero
Guest

Thank you so much. It works like a charm.

Johann Le Niniven
Guest

hello,

when I use your code I have my content display twice :
https://drive.google.com/fi

i don’t get why
could you help me ?

best regards,
Johann

UgoChukwu Agbams
Guest

I want to add up to 3 different menus, how do I go about it. The content of each menu should be printed using a short code generated by a plugin like [affiliate_area], [twofactor_user_settings] and [insert page=’user-wallets’ display=’content’].
How do I achieve such?

Asola Akbar
Guest

Hi, nice tutorial, i get the tabs part. Im looking for the same function, but not exactly like this. I want to add edit profile in the new page, not inside the tabs like usual woocommerce. Any idea how to move the “form-edit-account.php” function to new page?

hardik
Guest

i want to know that is there a way to display a content of some page or php file instead of ‘your new content’?