Customizing Your WooCommerce Account Screen

In the public video about Membership Dashboards as part of this series on building a membership site, I showed you how you can use the WooCommerce “My Account” screen as your member dashboard. I also showed you the basics of how you can use Kadence Elements in order to build your own dashboard for that screen.

To do more robust customizations to this screen, however, often involves more technical changes. For instance, you may want to…

• Remove the default text which sits on top of the default WooCommerce dashboard
• Add or remove options from the “My Account” menu
• Rename menu items
• Add custom screens to the menu

In this bonus module for this series (for members only), I’m going to give you the PHP code needed to make some of these changes. I’ll give you a video walk-through of what the code is doing so that you can make modifications. I’ll also show you how to implement it.

It does get a little nerdier, which is why we’re doing this in a separate bonus video of the series. And as a basis, we’ll use the Account screen from the Blog Marketing Academy itself as our model. I’ll take you behind the scenes on how it is built.

Removing The Default WooCommerce Dashboard Text

By default, the WooCommerce dashboard has the following text on it:

From your account dashboard you can view your recent orders, manage your shipping and billing addresses, and edit your password and account details.

You can just leave it, if you want. However, you may also want to remove it so that you can build your own Dashboard page without interference.

In order to do this, you need to use your child theme and put a modified version of the WooCommerce dashboard PHP template into it. We then remove that code from the dashboard and this new version of the file will take over for the default version.

Eery site is different, depending on the theme you are using. Here’s the basic process when using the Kadence Theme:

1. Use the Kadence Child Theme Builder plugin to generate a child theme for your core Kadence installation. No need to enter any special settings. All we’re doing is creating a blank child theme.
2. Install and active the new child theme. In some cases, there may be some Customizer settings and CSS that need to be checked again because technically you’re using a different theme now. But, overall, whatever you had set for core Kadence will still be the case as the parent theme is still there.
3. Grab the default dashboard.php file from WooCommerce. It will be found in /plugins//woocommerce/templates/myaccount/. Take a copy of that dashboard.php file and upload it to your child theme folder in the child_theme/woocommerce/myaccount/dashboard.php folder.
4. Now, edit the copy of dashboard.php file in your child theme to comment out (ore remove) the code which inserts that default text.
5. Save the file (or upload it) and you’re done.

The code that you want to remove or comment out is this:

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

<p>
	<?php
	/* translators: 1: Orders URL 2: Address URL 3: Account URL. */
	$dashboard_desc = __( 'From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">billing address</a>, and <a href="%3$s">edit your password and account details</a>.', 'woocommerce' );
	if ( wc_shipping_enabled() ) {
		/* translators: 1: Orders URL 2: Addresses URL 3: Account URL. */
		$dashboard_desc = __( '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' );
	}
	printf(
		wp_kses( $dashboard_desc, $allowed_html ),
		esc_url( wc_get_endpoint_url( 'orders' ) ),
		esc_url( wc_get_endpoint_url( 'edit-address' ) ),
		esc_url( wc_get_endpoint_url( 'edit-account' ) )
	);
	?>
</p>

With that code gone, you can completely control the look of the dashboard screen using something like Kadence Elements.

Altering the WooCommerce Account Menu

The good news is that we don’t have to mess with a child theme to modify the menu. But, we do need to work with some PHP code. We can create code snippets and set them up in whatever Snippets plugin you prefer. Personally, I use FluentSnippets.

The WooCommerce Account screen is all generated with code. It is not a series of separate pages and you will not see the individual menu items on the list of pages inside WordPress. Each sub-section of the screen is called an Endpoint. We will use code to register new endpoints as necessary (if we’re adding custom sections). We will also use code to remove or rename menu items as needed.

Here’s the code I use to add custom endpoints I use here at the Blog Marketing Academy:

add_action('init', function() {
    add_rewrite_endpoint('credithistory', EP_ROOT | EP_PAGES);
    add_rewrite_endpoint('clientlog', EP_ROOT | EP_PAGES);
    add_rewrite_endpoint('bookings', EP_ROOT | EP_PAGES);
    add_rewrite_endpoint('clients', EP_ROOT | EP_PAGES);
    add_rewrite_endpoint('success', EP_ROOT | EP_PAGES);
});

This code is adding 5 custom endpoints, for 5 different sections of the Account screen that are not typically there. You may have less… or more. This code does not physically insert the new menu items. All it is doing is ensuring that the endpoints are registered so that URLs will respond properly to them when the user clicks on it. Otherwise, you’d get 404 errors.

The code used to control the menu items on the “My Account” screen is…

add_filter( 'woocommerce_account_menu_items', 'bma_add_link_my_account' );
function bma_add_link_my_account( $items ) {
   $newitems = array(
      'dashboard'       => __( 'Dashboard', 'woocommerce' ),
      'edit-address'       => __( 'Address', 'woocommerce' ),
      'edit-account'    => __( 'Account details', 'woocommerce' ),
      'orders'          => __( 'Transaction History', 'woocommerce' ), 
      'payment-methods' => __( 'Payment methods', 'woocommerce' ),
      'credithistory' => __( 'Credit History', 'woocommerce' ),
      'bookings' => __( 'Appointments', 'woocommerce' ),
      'success' => __( 'Send Testimonial', 'woocommerce' ),
      'clients' => __( 'Client Information', 'woocommerce' ),
      'customer-logout' => __( 'Logout', 'woocommerce' ),
   );   
   return $newitems;
}

In this case, what we’re doing is simply redefining the entire menu – including options that are there by default. There are other approches to this where we remove from options and add some options. But, with this code, we’re simply overwriting the whole menu with our own.

This code is the exact snippet used here at the Blog Marketing Academy. Note that the first part of each item (for you coding type, the array key) is the “slug” and must match the proper slug for the endpoint (See above).

Lastly, the code above contains some custom menu options for new, custom endpoints. For example, “bookings” is a custom endpoint I made in order to show the Fluent Booking widget so people can see their appointment history in their dashboard. While the endpoint is registered and we’ve added it to the menu, we still need to determine the output of the screen when people click on it.

There are different ways to do this, depending on what you want.

In this code, I’m using the shortcode for a Kadence Element to show that template when people click on the “bookings” option:

add_action('woocommerce_account_bookings_endpoint', function() {
    echo do_shortcode('[kadence_element id="3554391"]');
});

I could hand-code this screen if I wanted, but using Kadence Elements is far nicer. You could use the same approach to run any shortcode. For instance, here’s the one that powers my credit log for Anytime Credits:

add_action('woocommerce_account_credithistory_endpoint', function() {
	echo "<h2>Anytime Credit - Debit History</h2>";
    echo do_shortcode('[ninja_tables id="3553566"]');
});

This code uses standard HTML to provide the header, then uses a shortcode to bring in a table created using the Ninja Tables plugin.

Lastly, here’s how to route a dashboard menu option to another page which isn’t even part of the dashboard:

add_filter( 'woocommerce_get_endpoint_url', 'maybe_success_endpoint', 10, 4 );
function maybe_success_endpoint ($url, $endpoint, $value, $permalink)
{
    if( $endpoint == 'success')
        $url = 'https://staging.blogmarketingacademy.com/success/';
    return $url;
}

For this one, when people click on the “Success” menu option, it will send them to my testimonial collection for page.

Between using these code snippets as a starting point… and Kadence Elements for some of the screens… you can modify the WooCommerce “My Account” screen to serve as a great dashboard for your membership site.

As always, if you have any questions or would just like me to take care of this for you, don’t hesitate to reach out.