WooCommerce Tutorials

How to Add a Custom Page to the ‘My Account’ Area in WooCommerce

When it comes to creating a good customer experience, the WooCommerce ‘My Account’ area can sometimes be left until last. After all, it’s generally the page customers visit after they’ve parted with their money. But for a lot of online stores, this part of the customer’s journey is extremely important for encouraging loyalty.

For this reason, we’ll be providing you with step-by-step instructions to add custom pages to the ‘My Account’ area. As a bonus, we’ll discuss some scenarios for when adding new pages to this sometimes forgotten user area might be necessary.

The plugin mentioned in this guide:

Start your 14-day free trial of WooCommerce Account Pages

You can start your free trial right now and instantly add new pages to your customer account area.

Get Free Trial
Start your 14-day free trial of WooCommerce Account Pages thumbnail

Want to skip straight to the tutorial? Click this link.

Why you might need to customise the WooCommerce my account area

So, before we get into the tutorial, let’s first address some situations that might require you to customise your online store’s account area.

To give the customer vital information or extra resources

If you’re selling something that requires you to give a little more information to the customer after their purchase, the account area could be a great place to add this. 

For example, a store that sells specialist plants might need to provide their customers with planting guides and instructions. They can and should send this information to customers via email, but if that email gets lost then customers would be able to login to their account and find the information they need quickly and easily with a custom account page.

Similarly, a store that sells hardware likely needs to provide customers with user guides and extra information so that they can use their new purchase without friction. By adding an extra page to the account area, you’re making sure your customers don’t have to jump through hoops to get the information they need.

Account pages WooCommerce

To display different content depending on the user

If you run a membership site, you might require something a little more custom than the standard WooCommerce account area can provide.

By adding new custom account pages that applies to all members, you might be sharing too much information with the wrong people. Being able to create account pages that only show up for certain users is a must so that you can share the right content, with the right people.

Add new account pages WooCommerce

The above situations can all be solved with little fuss by using an account pages plugin. Below, we’ll outline how to set this up and get it running in no time, so you can focus on running your store.

How to add a custom page to the ‘My Account’ area in WooCommerce

Here we’re going to outline how to add custom pages to the WooCommerce account area with a plugin. 

WooCommerce Account Pages allows you to add a new page or tab to the My Account area in WooCommerce.

To get started, get your 14-day free trial of WooCommerce Account Pages from the Iconic store: iconicwp.comwoocommerce-account-pages

Then follow these steps:

  1. Go to Plugins > Add New > Upload Plugin
  2. Choose the zip file you downloaded, upload, and then click ‘Activate’
  3. Once activated, you’ll need to enter your licence key

Now that we have WooCommerce Account Pages installed, we can move onto adding your new pages.

Add new account pages

  1. Go to Pages > Add New.
  2. Enter a title and content for your new account page. The content of this page can include anything you’d add to a regular WordPress page, including links, images, videos and more.
WooCommerce new page user guides
  1. Next, you’ll need to select your main account page as the parent page from the right-hand Page Attributes section. This allows your new page to show up in the ‘My Account’ area.
WooCommerce account customise
  1. Once done, click Publish and your new page will be visible in your My Account area on the frontend of your site.
WooCommerce account page

Roundup: customize the WooCommerce my account area 

In this guide, you’ve learned why you might need to add custom pages to the ‘My Account’ area. You’ve also had step-by-step instructions for how to add new pages without fuss using a WooCommerce account pages plugin.

When used well, adding custom pages to the account area can dramatically improve existing customer experience and encourage them to keep coming back. WooCommerce Account Pages makes that process just a little bit smoother.

Plugins featured in this guide:

Start your 14-day free trial of WooCommerce Account Pages

You can start your free trial right now and instantly add new pages to your customer account area.

Get Free Trial
Start your 14-day free trial of WooCommerce Account Pages thumbnail

James is the founder of Iconic and an experienced WooCommerce plugin developer.

Share

51 Comments

  1. cuqpon says:

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

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

  2. Osber Bermúdez says:

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

    • James Kemp says:

      Hey Osber,

      If you want it to only show on that page, I’d suggest using the iconic_is_endpoint helper to detect the current page and then add scripts/styles in the normal way using wp_enqueue_style. You’d need to check this at a point where $wp_query is accessible, so probably best on the wp_enqueue_scripts hook.

  3. Bakhash 2677 says:

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

  4. Geetha Lakshmi says:

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

  5. Scott J Freeman says:

    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 says:

      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.

      • James Kemp says:

        Sounds like something else is going here. Did you try enabling debug log to see if any other errors were thrown?

  6. coachasymi says:

    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.

    • James Kemp says:

      Glad to hear it! Do you mean content from another WP page? If so, hold on a second and I’ll get the code for you!

      • coachasymi says:

        Yes, content from another WP page. Say the page has text, images and shotcode (why not?). I wonder if we could display them in the newly added tab. I’m experimenting around on my own based on your codes but has no luck so far.

    • James Kemp says:

      echo apply_filters( ‘the_content’, get_post_field( ‘post_content’, 42 ) );

      Where 42 is your page ID.

      • coachasymi says:

        How on earth did you do that!? It’s working perfectly on my site =) Blew me away! Thanks a lot! Just so you know, I have changed all the ‘information’ text I could find in the code and replace with my own. I understand that those are the new tab / endpoint name, right? Is this the right way to do it? Also, do we need to put some filter or array to change the order of the tabbed menus?

        • James Kemp says:

          Glad it works! yes, just change the information wording – probably should have chosen something less generic to make it more clear!

          In terms of ordering, you’d need to sort the $items array in the iconic_account_menu_items function.

          • coachasymi says:

            Yeah, I managed to re-order the tabbed menus! Thanks for the hint =) Now I noticed one tiny “flaw” in the original code, if you could prefect it – when you click on “Information” menu, however the entry-title doesn’t change to “Information” but went to the default “My Account” entry-title instead. You know, when you click on “Orders” the entry-title would be “Orders” so our users won’t be confused. Can you help tweak it a little bit more? TIA

          • Will Ambrose says:

            Hi, following this thread. It’s helping me a lot. Can you elaborate a bit on how you ordered the account menu items? Do I have to rewrite that whole $item array in my custom order or can ‘information’ be inserted into a different spot in $items?

          • James Kemp says:

            Hey @disqus_90ufxQjrVd:disqus

            You’d probably need to loop through the current items, check which if the item you’re currently on is the one you want to insert “Information” after, then add information to the array and break out of the loop.

          • mrblack says:

            Would love some direction on this as well!

          • Will Ambrose says:

            I created this snippet in order to add my extra item (videos). It basically rewrites the menu items. There might be a more elegant solution to ‘insert’ the extra menu item but this works and has been live on a busy site for a few months.

          • mrblack says:

            Is there a snippet for this? Having trouble.

        • wes says:

          Hi, to change the order you can use the array_splice function: // $items[‘coveyclub’] = __( ‘Covey Club’, ‘iconic’ );
          $insert[‘coveyclub’] = __( ‘Covey Club’, ‘iconic’ );

          array_splice( $items, 5, 0, $insert );

          https://stackoverflow.com/questions/3797239/insert-new-item-in-array-on-any-position-in-php

      • Hey James,

        Thanks for the post. I am a complete non-techie with no knowledge of coding. I sort of understood your thing, as you have written it in very simple language. I got my endpoint. Now, I also want to add a customer wp page. I replaced given below line of code with your and my page ID but I am still not getting redirected to that page. Can you help please ? Thanks in advance.

        echo ‘Your new content’; —-> echo apply_filters( ‘the_content’, get_post_field( ‘post_content’, 1136 ) );

  7. Aleksandr Kh says:

    Thanks)

  8. yusra says:

    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

  9. Isaías Subero says:

    Thank you so much. It works like a charm.

  10. Johann Le Niniven says:

    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

  11. 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?

  12. Asola Akbar says:

    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?

  13. hardik says:

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

  14. Alex says:

    Can you tell me how to add a field in Registration form? I have been stuck in this code

    function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) {
    if ( isset( $_POST[‘billing_first_name’] ) && empty( $_POST[‘billing_first_name’] ) ) {
    $validation_errors->add( ‘billing_first_name_error’, __( ‘Error: First name is required!’, ‘woocommerce’ ) );
    }
    if ( isset( $_POST[‘billing_last_name’] ) && empty( $_POST[‘billing_last_name’] ) ) {
    $validation_errors->add( ‘billing_last_name_error’, __( ‘Error: Last name is required!.’, ‘woocommerce’ ) );
    }
    return $validation_errors;
    }
    add_action( ‘woocommerce_register_post’, ‘wooc_validate_extra_register_fields’, 10, 3 );

    I have used this article as reference https://www.cloudways.com/blog/add-woocommerce-registration-form-fields/

  15. jadenew says:

    As someone with EXTREMELY basic knowledge of PHP – thank you for posting the tutorial, it’s awesome and very easy to follow!! 🙂

  16. Ferdin Norbert says:

    Hi, Thanks for the tutorial. By the way, I still have problem. My endpoint always redirects to the dashboard.

  17. Debbie Kurth says:

    Everything works great..until displaying the content. Nothing comes out

  18. babakFP says:

    Hi thanks for this post

    I have a plugin and I what to show plugin pages inside MyAccount page. Are there a bether way to do this? I dont know how to call plugin page content into MyAccount page! so i’m noob 🙁

    This plugin (Yith Affiliates) has 6 pages. has a menu that linked to this pages.

  19. Patrik says:

    Instead of your own function, why not use is_wc_endpoint_url() ?

  20. […] you need customers to create an account with you, or can you add a guest checkout […]

  21. Hi, nice tutorial. Thanks for help

  22. Mario Benedek says:

    Like coachasymi, I too found that this code does not change the heading title of the page content from “My Account” to “Information”, as it should.

    I did find a solution, and the iconic_is_endpoint function plays a role! Here is what worked for me:

    function my_set_account_guide_page_title( $title, $endpoint ) {
    if ( iconic_is_endpoint( ‘guide’ ) && in_the_loop() ) $title = __( “Information”, “woocommerce” );
    return $title;
    }
    add_filter( ‘the_title’, ‘my_set_account_guide_page_title’, 10, 2 );

    Also, flush_rewrite_rules() needs to be called at least once after the add_rewrite_endpoint function call! Make sure flush is only called once, otherwise it’s clears the cache on every page load. Best place to put the flush call is in the install function of your plugin.

  23. Dan says:

    How can I add an option under the My Account menu?

  24. Ayoob says:

    Hi i want create two page ‘add_addrss.php’ and ‘edit_address.php’ in woocommerce form -edit-address.php i use ‘
    But dont work

  25. Helen says:

    Hi,
    I would simply like to add a small sentence of text to the new ‘Referal Link’ tab on My Account page, to explain the discount mechanism for referring a friend, but I cannot see where to do this.

    I installed the ‘Referral System for WooCommerce plugin developed by Codup.io’ and the page is very uninformative about how the process works.

  26. rv says:

    any information for making the endpoint link load in blank_ new window? instead of the current tab

Leave a Reply

Your email address will not be published. Required fields are marked *