woocommerce my account

WooCommerce Tutorials

How to Customize the My Account Page in WooCommerce

When it comes to creating a good customer experience, the WooCommerce My Account page 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.

So, in this guide, we’ll show you how to add custom pages to the My Account area in WooCommerce. As a bonus, we’ll share why adding new pages to your customers’ account area might be necessary.

The plugin mentioned in this guide:

Start your 14-day free trial of WooCommerce Account Pages

Start your free trial right now and instantly add new pages to your customer account area.

or learn more

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

Why you might need to customise the WooCommerce my account page

So, before we get into the tutorial, let’s first explore why you might want to add extra pages to the account page.

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, 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 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.

You might be sharing too much information with the wrong customers if you add new custom account pages for all members. So, the ability to create account pages that only show up for certain users is crucial. All so you can share the right content, with the right people.

Add new account pages

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.

How to create a custom page for the My Account area in WooCommerce

In this section, we’re going to outline how to add custom pages to the WooCommerce account area with a plugin. 

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

To get started, purchase WooCommerce Account Pages from the Iconic store: iconicwp.com/woocommerce-account-pages

Or start a free trial here:

Start your 14-day free trial of WooCommerce Account Pages

Start your free trial right now and instantly add new pages to your customer account area.

or learn more

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 your 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, shortcodes and more.
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.
page attributes
  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

Customize the WooCommerce my account area today

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 an account pages plugin.

When used well, adding custom pages to the account area can dramatically improve your existing customer experience and encourage customers to keep coming back.

WooCommerce Account Pages makes that process a lot simpler.

Start your 14-day free trial of WooCommerce Account Pages

Start your free trial right now and instantly add new pages to your customer account area.

or learn more

Avatar

James is the founder of Iconic and an experienced WooCommerce plugin developer. He has been featured on numerous WordPress publications.

He is a keen photographer and currently shoots using his favourite mirrorless camera, a Fuji X-T20.

53 Responses

Avatar
Eileen Valdez 1 month ago

It is an amazing post and you explained it in a detailed way. Nice to see this here. I will bookmark your blog for more details. Keep sharing new things like this.

Jhim
Jhim admin 1 month ago

Hi Eileen,

Thank you! Glad that it helps! <3

Avatar

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

Avatar

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.

Avatar

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

Avatar
Mario Benedek 2 years ago

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.

Avatar
4 WooCommerce Checkout Customization Techniques To Boost Sales – WooGenie Blog 2 years ago

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

Avatar

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

Avatar

Actually n/m. That didn't work at all as I expected.

Avatar

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.

Avatar
Debbie Kurth 2 years ago

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

Avatar
Ferdin Norbert 2 years ago

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

Avatar

As someone with EXTREMELY basic knowledge of PHP - thank you for posting the tutorial, it's awesome and very easy to follow!! :)

Avatar

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/

Avatar

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

Avatar
Asola Akbar 3 years ago

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?

Avatar
UgoChukwu Agbams 3 years ago

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?

Avatar
James Kemp admin 3 years ago

Hey,

The easiest way is to use my Account Pages plugin: https://iconicwp.com/products/woocommerce-account-pages/

You can then just create subpages of your My Account page and as the content as you would on a normal page.

Avatar

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

Avatar
coachasymi 4 years ago

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.

Avatar
James Kemp admin 4 years ago

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!

Avatar
coachasymi 4 years ago

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.

Avatar
James Kemp admin 4 years ago

echo apply_filters( 'the_content', get_post_field( 'post_content', 42 ) );

Where 42 is your page ID.

Avatar
coachasymi 4 years ago

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?

Avatar
James Kemp admin 4 years ago

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.

Avatar
coachasymi 4 years ago

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

Avatar
Will Ambrose 4 years ago

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?

Avatar
James Kemp admin 4 years ago

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.

Avatar

Would love some direction on this as well!

Avatar
Will Ambrose 4 years ago

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.

Avatar

Is there a snippet for this? Having trouble.

Avatar

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

Avatar
Shubham Bansal 3 years ago

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 ) );

Avatar
James Kemp admin 3 years ago

Hey, if the endpoint isn't showing, you may need to refresh your permalinks. Go to Settings > Permalinks then try the page again. Alternatively, my WooCommerce Account Pages plugin might get you there more quickly! https://iconicwp.com/products/woocommerce-account-pages/

Avatar
Scott J Freeman 4 years ago

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.

Avatar
Scott J Freeman 4 years ago

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.

Avatar
James Kemp admin 4 years ago

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

Avatar
Geetha Lakshmi 4 years ago

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

Avatar
Osber Bermúdez 4 years ago

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

Avatar
James Kemp admin 4 years ago

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.

Avatar

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

add_action( 'woocommerce_account_SLUGHERE_endpoint', function(){
echo 'hello';
} );

Avatar
James Kemp admin 4 years ago

Nice! I wasn't aware of that hook. Will update the post later today.

Leave a Reply

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