Tabbed “My Account” pages in 2.6

The “My Account” pages in WooCommerce are highly important for customers as it’s where you can access orders, available downloads, and address/account information.

Plugins can also add data to the account page if they need to, such as Subscriptions and Bookings. Because of this, a lot of things can be happening on this one page. This can lead to the page being heavy (it is not cachable) and confusing.

We are pleased to announce that in WooCommerce 2.6 we are introducing a new “My Account” page where all the content can be split into menus and pages, allowing customers to navigate between content without viewing all data at once.

Here is an example of the navigation using the Twenty Sixteen theme:

Note that each table and/or session of the old “My Account” page is now part of a menu and we’ve improved some things such as the “Orders” page where you can now access all  past orders and not just the latest 15.

The design will be dependent on your theme of course – this is an example of how Storefront is styling things for even more clarity:

Code Changes

Templates were changed, such as the my-account.php file, however we’ve maintained backwards compatibility with themes and plugins. If you have a outdated version of the my-account.php file you will see the page as it was previously.

Plugins can continue inserting new tables on the page like before, but they will appear on the first menu item which is now headed as the “My Account – Dashboard” page.

Inserting new tabs in the new “My Account” page

Adding new tabs is possible with code and will involve adding new endpoints to WordPress. The code below describes how this is done:

https://gist.github.com/claudiosanches/a79f4e3992ae96cb821d3b357834a005

Testing it out

The code is available to test on our master branch until we tag beta 1. We welcome your feedback and hope you like the new page!


Keep yourself in the loop!

Sign up for the WooCommerce developer newsletter:
Hidden
Hidden
Hidden


38 responses to “Tabbed “My Account” pages in 2.6”

  1. About time. 🙂

  2. Beka Rice Avatar
    Beka Rice

    😍😍😍 great work! looks awesome

  3. bradkgriffin Avatar
    bradkgriffin

    Remind me: Is “my reviews” an endpoint that could / should be a Tab option?

    1. Indeed something that we can add in a new release.

  4. Daniel Bitzer Avatar
    Daniel Bitzer

    Great feature and a great implementation! Looking forward to the release 🙂

  5. Great 🙂
    When is WC 2.6 Beta 1 is getting tagged or any release date for WC 2.6?

    1. We’ll announce here when we’re ready.

  6. […] 2.6 is getting close to beta testing, and it adds some cool new things like a tabbed account area and ajax cart […]

  7. […] You can read more about the new account page here. […]

  8. […] most visible update in WooCommerce 2.6 is the new design for account pages. Previously, the account page packed a ton of information in a somewhat disorganized fashion. The […]

  9. Tim Graham Avatar
    Tim Graham

    Are there shortcodes for each tab’s content ?

    1. Nop and not needed, since they are all endpoints and not WordPress pages.

      1. Tim Graham Avatar
        Tim Graham

        I’m not a fan of end points as you generally can’t change the page template. Is that the case ?

        1. Yep, you can change the templates.

  10. Is possible to translate to spanish this news links on my account page? Dashboard, Addresses, Payment Methods… we have tried to make a new PO & MO file from POT file allowed in “wp-content/plugins/woocommerce/i18n/languages” but don’t works.

  11. Tal Elmishali Avatar
    Tal Elmishali

    Can I use the new My Account tabbed on my own theme?

    Thanks.

    1. Yes, it’s come by default in WooCommerce 2.6.

      1. Tal Elmishali Avatar
        Tal Elmishali

        I mean to use the style of the My Account, because right now it’s normal ul.

        1. Just add style for it in your theme.

  12. Is there full documentation available for this? I’m having an issue are upgrading where some of the endpoints, like `orders` are returning 404 errors.

    1. Go to WordPress admin > Settings > Permalinks and click in the “save” button.

      1. Thanks. I had done that. My issue turned out to be related to running Redis Object Cache. Once I cleared that it all started working fine.

  13. With this it really feels like WooCommerce again is falling behind many other ecommerce solutions out there. Why not make this a standard menu so non developers easily can add additional links?? Many shop owners gives their customers the opportunity to open a pricelist, download documents + +. It is not possible any longer without adding a second menu, or beeing a developer.

    1. If the store owner cannot fathom adding links via the filters, how on earth will they add the advanced content you just suggested?

      Pages and nav menus already exist in WordPress. Why reinvent the wheel?

      > It is not possible any longer without adding a second menu, or beeing a developer.

      You make it sound like functionality has been removed. It hasn’t.

      1. Exactly, why reinvent the wheel? The menus already exists so why not use them?

        1. You can use them.

  14. Presumably there are new conditional tags for the new endpoints? And can the ‘my account’ dashboard page (ie not including the new endpoint ‘pages’) be selected this way? I need to add markup to just the dashboard and not have it inherited on the endpoint ‘pages’.

    1. No need new conditional tags for it, if you want to only add content to the dashboard, you can add using the `woocommerce_account_dashboard` action or overriding the `myaccount/dashboard.php` template.
      But here the interesting word “Presumably”… I think that it’s better you check and test, so will makes more sense for you 😉

  15. My website doesn’t have any downloads available and will never have them. I find the “downloads” button will be confusing for my clients. Is there a way to remove it?

    This change sounds very useful, I’m sure it will make customers more comfortable.
    But somehow this approach feels old as it reminds me of the “wp_list_pages” function that was left behind thanks to custom nav menus. Wouldn’t it be better if Woocommerce could register a new custom navmenu and allow users to add and remove items to this new navigation panel using WP’s GUI?

    1. Go to WooCommerce > Settings > Account and delete the slug for the Downloads endpoint. And it’s done, no more downloads page or link in the menu.

      1. Cool! everything makes more sense now. Thanks a lot, Claudio.

Leave a Reply

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