Categories
WooCommerce Core

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:

storefront-2-my-account
New “My Account” page on Storefront 2.0

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:


<?php
class My_Custom_My_Account_Endpoint {
/**
* Custom endpoint name.
*
* @var string
*/
public static $endpoint = 'my-custom-endpoint';
/**
* Plugin actions.
*/
public function __construct() {
// Actions used to insert a new endpoint in the WordPress.
add_action( 'init', array( $this, 'add_endpoints' ) );
add_filter( 'woocommerce_get_query_vars', array( $this, 'get_query_vars' ), 0 );
// Change the My Accout page title.
add_filter( 'the_title', array( $this, 'endpoint_title' ) );
// Insering your new tab/page into the My Account page.
add_filter( 'woocommerce_account_menu_items', array( $this, 'new_menu_items' ) );
add_action( 'woocommerce_account_' . self::$endpoint . '_endpoint', array( $this, 'endpoint_content' ) );
}
/**
* Register new endpoint to use inside My Account page.
*
* @see https://developer.wordpress.org/reference/functions/add_rewrite_endpoint/
*/
public function add_endpoints() {
add_rewrite_endpoint( self::$endpoint, EP_ROOT | EP_PAGES );
}
/**
* Add new query var.
*
* @param array $vars
* @return array
*/
public function get_query_vars( $vars ) {
$vars[ self::$endpoint ] = self::$endpoint;
return $vars;
}
/**
* Set endpoint title.
*
* @param string $title
* @return string
*/
public function endpoint_title( $title ) {
global $wp_query;
$is_endpoint = isset( $wp_query->query_vars[ self::$endpoint ] );
if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
// New page title.
$title = __( 'My Custom Endpoint', 'woocommerce' );
remove_filter( 'the_title', array( $this, 'endpoint_title' ) );
}
return $title;
}
/**
* Insert the new endpoint into the My Account menu.
*
* @param array $items
* @return array
*/
public function new_menu_items( $items ) {
// Remove the logout menu item.
$logout = $items['customer-logout'];
unset( $items['customer-logout'] );
// Insert your custom endpoint.
$items[ self::$endpoint ] = __( 'My Custom Endpoint', 'woocommerce' );
// Insert back the logout item.
$items['customer-logout'] = $logout;
return $items;
}
/**
* Endpoint HTML content.
*/
public function endpoint_content() {
echo '<p>Hello World!</p>';
// You can load a template here with wc_get_template( 'myaccount/my-custom-endpoint.php' );
}
/**
* Plugin install action.
* Flush rewrite rules to make our custom endpoint available.
*/
public static function install() {
flush_rewrite_rules();
}
}
new My_Custom_My_Account_Endpoint();
// Flush rewrite rules on plugin activation.
register_activation_hook( __FILE__, array( 'My_Custom_My_Account_Endpoint', 'install' ) );

view raw

custom-my-account-endpoint.php

hosted with ❤ by GitHub

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!

38 replies on “Tabbed “My Account” pages in 2.6”

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

Like

By Post Author

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

Like

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.

Like

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.

Like

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

Like

By Post Author

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.

Like

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.

Liked by 2 people

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.

Liked by 1 person

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

Like

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 😉

Like

By Post Author

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?

Like

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.

Liked by 1 person

By Post Author

Comments are closed.