How to Add New Tab to My Account Page in WooCommerce

Adding new tab with custom content to the WooCommerce My Account page (and all shortcode appearances actually) is one of the most common customization requests we receive in the support forums for Althemist WooCommerce Themes.

While this is a customization and obviously outside the scope of our support, we quite often end up providing similar useful snippets to althemist users.

Today, we are going to show you how to add custom tab on WooCommerce My Account page.

May be you noticed, we have an account section in the althemist website header. As our website is running on WordPress combined with our “flagship” theme (Rigid), we are also using WooCommerce for selling services and digital goods.

Now, if you hover over the account icon in the header, you’ll notice the links inside are actually the default WooCommerce Account tabs links. What’s not standard there is the “Althemist Themes Support” link in the list.

How We Did That?

Since WooCommerce v. 2.6.0, the My Account area in WooCommerce is based on “endpoints”. What this mean is that there is only 1 page existing (usually “/my-account”), and all sub-pages are dynamically loaded (e.g. – “/my-account/downloads”).

This makes creating additional sub-pages to the My Account area a little more complicated for non experienced users, but it’s totally doable, as WordPress and WooCommerce provide all the necessary hooks for the job to be done!

PHP Function to Register the Custom Endpoint and Add the Tab With Content

/**
 * tested with WooCommerce version 3.6.5
 */
  
// ------------------
// STEP 1. Add new endpoint to use on the My Account page
// IMPORTANT*: After uploading Permalinks needs to be rebuilt in order to avoid 404 error on the newly created endpoint
  
function althemist_add_premium_support_endpoint() {
    add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );
}
  
add_action( 'init', 'althemist_add_premium_support_endpoint' );
  
  
// ------------------
// 2. Add new query var
  
function althemist_premium_support_query_vars( $vars ) {
    $vars[] = 'premium-support';
    return $vars;
}
  
add_filter( 'query_vars', 'althemist_premium_support_query_vars', 0 );
  
  
// ------------------
// 3. Insert the new endpoint into the My Account menu
  
function althemist_add_premium_support_link_my_account( $items ) {
    $items['premium-support'] = 'Premium Support';
    return $items;
}
  
add_filter( 'woocommerce_account_menu_items', 'althemist_add_premium_support_link_my_account' );
  
  
// ------------------
// 4. Add content to the new endpoint
  
function althemist_premium_support_content() {
echo '<h3 style="text-align: center;">Premium Althemist Themes Support</h3>';
echo 'Your Althemist Themes Support Account Dashboard is the place to add your purchase codes, manage favorites and subscriptions to support topics and check all your support related topics and replies.';
echo ' your custom content goes here ';
}
  
add_action( 'woocommerce_account_premium-support_endpoint', 'althemist_premium_support_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

Use a Shortcode for Content

You could even use the core WordPress function do_shortcode and render a pre-defined shortcode in your custom tab. In order to do that, just replace the part defining the content with something like this:

  
// ------------------
// 4. Add content to the new endpoint
  
function althemist_premium_support_content() {
echo '<h3 style="text-align: center;">Premium Althemist Themes Support</h3>';
echo do_shortcode( ' /* [your-shortcode-goes-here] */ ' );
}

Where to add the custom tab code snippet?

The best place to add such PHP modifications snippets would be at the bottom of your child theme functions.php file. Any CSS modifications, respectively goes in your child theme style.css file. Make sure you know what you are doing when editing such files. If you don’t feel comfortable doing code modifications, it’s better to hire a qualified developer.

Conclusion

That would be everything needed to get you started! There’s obviously some things to customize as per your specific needs, but once you’ve done it, it’s fairly straightforward to modify the links wording and content.

Let us know in the comments bellow if you use this tutorial on your WooCommerce site.

About the Author: Althemist

Dimitar Koev is a graphic and web designer, front-end developer and marketing expert. CEO & founder of the Althemist team (previously known as Koev) - an independent envato market author, focused on building WordPress themes with strong e-commerce accent.