Atomic Smash homepage splash

Customising the WooCommerce ‘My Account’ section

Words by Adam WardJanuary 26, 2018

In this post, I will run through a few handy little customisations you can make to the WooCommerce ‘My Account’ section. Since its creation back in 2008 and the acquisition by Automattic in 2015, WooCommerce has, in my opinion, continued to hold its place as the best eCommerce solution available for WordPress. In terms of WooCommerce’s functionality and time saving, it has to be one of the best free plugins out there.

Project setup

** if you already have a preferred setup, feel free to skip this step. **

We use our own internal theme for projects but to help with this tutorial, I will use the official WooCommerce ’Storefront’ theme, so you can follow along with the steps.

To setup a new project with the WooCommerce Storefront theme, download the zip version from the official GitHub repo and add it as a theme to a fresh WordPress installation.

The Storefront theme uses Grunt, if you’re not familiar with this tool, it is a task runner, which carries out predefined tasks like compiling SASS, minifying CSS, images, JS etc. To get this all setup and working, you’ll need to navigate to the Storefront theme in a terminal window and run…

$ npm i

This will install all of the NPM dependencies the theme uses, including Grunt. Next, we can run…

$ grunt

This should automatically set up the project and compile all of the styles and scripts, making the theme ready to use. Next, activate the theme in the WordPress backend and you’ll be prompted to install the WooCommerce plugin. Then, run through the onscreen WooCommerce installation steps.

Create the My Account page

In the WP backend, add a new page called ‘My Account’ and copy and paste this shortcode – [woocommerce_my_account] in to the main content editor and update the page.

Next, go into the WooCommerce settings and on the ‘account’ tab select the new page from ‘My account page’ drop-down menu –

If you head over to this newly created page on the front end you will see the ‘my account’ content.

 

Time to customise!


Although the WooCommerce Team have made a fantastic overview for the ‘my account’ section, every project usually requires a few changes here and there to suit a specific client’s needs. Hopefully, the tips below can help you on your way to achieving this on future projects.

 

1. Change the my account menu order


Very often, a client might ask for the order of the menu to be switched around.

This can easily be achieved by using the following technique – add the code below to your ‘functions.php’ file (on production sites, it would be best to keep all of your WooCommerce customisations in a separate file and just include it in your functions file).

 /**
  * Edit my account menu order
  */

 function my_account_menu_order() {
 	$menuOrder = array(
 		'dashboard'          => __( 'Dashboard', 'woocommerce' ),
 		'orders'             => __( 'Orders', 'woocommerce' ),
 		'downloads'          => __( 'Download', 'woocommerce' ),
 		'edit-address'       => __( 'Addresses', 'woocommerce' ),
 		'edit-account'    	=> __( 'Account Details', 'woocommerce' ),
 		'customer-logout'    => __( 'Logout', 'woocommerce' ),
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );

Changing the order is as simple as switching the order in the $menuOrder array.

/**
  * Edit my account menu order
  */

 function my_account_menu_order() {
 	$menuOrder = array(
 		'orders'             => __( 'Orders', 'woocommerce' ),
 		'downloads'          => __( 'Download', 'woocommerce' ),
 		'edit-address'       => __( 'Addresses', 'woocommerce' ),
 		'edit-account'    	=> __( 'Account Details', 'woocommerce' ),
 		'customer-logout'    => __( 'Logout', 'woocommerce' ),
		'dashboard'          => __( 'Dashboard', 'woocommerce' ),
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );

By moving the line ‘dashboard’ => __( ‘Dashboard’, ‘woocommerce’ ) to the bottom of the array we end up with a new order.

2. Change the menu tab name and icon


To change the name on one of the menu tabs you can just update the text in the same menu order array. Below, I have updated the ‘Orders’ tab to ‘Your Orders’

 /**
  * Edit my account menu order
  */

 function my_account_menu_order() {
 	$menuOrder = array(
 		'orders'             => __( 'Your Orders', 'woocommerce' ),
 		'downloads'          => __( 'Download', 'woocommerce' ),
 		'edit-address'       => __( 'Addresses', 'woocommerce' ),
 		'edit-account'    	=> __( 'Account Details', 'woocommerce' ),
 		'customer-logout'    => __( 'Logout', 'woocommerce' ),
		'dashboard'          => __( 'Dashboard', 'woocommerce' )
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );

Updating the icon is a case of updating the CSS. If you open up ‘inspect’ and have a look at where the icon sits in the code, you will notice it is a ‘before’ pseudo-element on the list item –

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {
	content: '\f291';
}

By default, the Storefront theme is using the FontAwesome icon set. This link, provides a good cheatsheet for getting all of the codes for each icon. To update the orders icon to a shopping trolley we will adapt the above code to this –

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {
	content: '\f07a';
}

3. Add a new menu tab and content


To add a new menu item, we will need to add this as a new ‘endpoint’ first. The endpoint acts as the URL slug that comes after /my-account/ . For this example, we will add a new section called ‘Awards’. Here’s how you add a new endpoint –

/**
  * Register new endpoints to use inside My Account page.
  */

 add_action( 'init', 'my_account_new_endpoints' );

 function my_account_new_endpoints() {
 	add_rewrite_endpoint( 'awards', EP_ROOT | EP_PAGES );
 }

Now in the ’settings>permalink’ section in the backend, click ‘save changes’ to flush the permalinks, this will clear your permalink settings and pick up on the new ‘awards’ endpoint, we just created.

We can now add this little snippet and get the required template-part for the content in this new section.

/**
  * Get new endpoint content
  */

  // Awards
 add_action( 'woocommerce_account_awards_endpoint', 'awards_endpoint_content' );
 function awards_endpoint_content() {
     get_template_part('my-account-awards');
 }

Create a new PHP file in theme root called ‘myaccount-awards.php’ and add some content

<?php

echo ‘Awards Section’;

We can now add the new ‘Awards’ menu item and CSS to change the icon for this to a star.

/**
  * Edit my account menu order
  */

 function my_account_menu_order() {
 	$menuOrder = array(
 		'orders'             => __( 'Your Orders', 'woocommerce' ),
 		'awards'             => __( 'Awards', 'woocommerce' ),
 		'downloads'          => __( 'Download', 'woocommerce' ),
 		'edit-address'       => __( 'Addresses', 'woocommerce' ),
 		'edit-account'    	=> __( 'Account Details', 'woocommerce' ),
 		'customer-logout'    => __( 'Logout', 'woocommerce' ),
		'dashboard'          => __( 'Dashboard', 'woocommerce' )
 	);
 	return $menuOrder;
 }
 add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--awards a:before {
	content: '\f005';
}

If you now click the new menu item you should now see the new content.

4. Add custom content into existing tabs


Sometimes you might want to add a bit more of a message or the user’s avatar into the ‘dashboard’ section. To do this we will need to follow the WooCommerce approved method for editing template files.

Create a folder in your theme root called ‘woocommerce’, then add the file you want to override. We want to override the my account dashboard file, so looking at the WooCommerce template structure for version 3.2.0 – I can see that there’s a ‘myaccount’ directory and a ‘dashboard.php’ file within it. We need to create that same path in our newly created ‘woocommerce’ folder, to overwrite the default file.

Why? Because WooCommerce is a plugin and if you update the core files they could be overridden when you update the plugin, which would result in you losing all your changes. This method ensures you keep the code and WooCommerce will automatically look for the file in your theme root first before the plugin directory.

In our new ‘woocommerce’ directory create another folder called ‘myaccount’ and then a new file called ‘dashboard.php’. Then copy the contents from this file, either from the GitHub repo (for your specific version) or from the plugin files.

Below I have copied the code from the ‘dashboard.php’ file and added in a new line of code – “< h1 >Interception!< /h1 >”

<?php
/**
 * My Account Dashboard
 *
 * Shows the first intro screen on the account dashboard.
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/dashboard.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.6.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
?>

<p><?php
	/* translators: 1: user display name 2: logout url */
	printf(
		__( 'Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)', 'woocommerce' ),
		'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
		esc_url( wc_logout_url( wc_get_page_permalink( 'myaccount' ) ) )
	);
?></p>

<!-- Customisation -->
<h1>Interception!</h1>

<p><?php
	printf(
		__( 'From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">shipping and billing addresses</a> and <a href="%3$s">edit your password and account details</a>.', 'woocommerce' ),
		esc_url( wc_get_endpoint_url( 'orders' ) ),
		esc_url( wc_get_endpoint_url( 'edit-address' ) ),
		esc_url( wc_get_endpoint_url( 'edit-account' ) )
	);
?></p>

<?php
	/**
	 * My Account dashboard.
	 *
	 * @since 2.6.0
	 */
	do_action( 'woocommerce_account_dashboard' );

	/**
	 * Deprecated woocommerce_before_my_account action.
	 *
	 * @deprecated 2.6.0
	 */
	do_action( 'woocommerce_before_my_account' );

	/**
	 * Deprecated woocommerce_after_my_account action.
	 *
	 * @deprecated 2.6.0
	 */
	do_action( 'woocommerce_after_my_account' );

/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */

You can repeat this method for any of the templates but proceed with caution – when WooCommerce make big updates to the plugin some templates might change names or the content could change, which you’ll need to stay aware of.

Wrapping Up!

That’s it. Hopefully, one of these tricks has saved you some time today! Feel free to let me know if you have any more handy tips or drop me a message if you have any questions.

Profile picture of Adam Ward

Adam WardDeveloper

Adam is an expert in WordPress development and CRM integrations. His ability to craft WordPress to a users needs makes our websites easier to use.

Go back to top

Keep up to date with Atomic news