Woocommerce Account Custom Tab

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:

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.

9 thoughts on “How to Add New Tab to My Account Page in WooCommerce

  • CarinaOctober 13, 2022 at 12:24 pm

    Update: It was a problem with the shortcode, not your code 🙂
    BUT when adding the shortcode like you mention above, the h3 title dissapears. How can I avoid that?

    Reply
    • AlthemistOctober 17, 2022 at 3:25 pm

      Can’t really tell. Could be hidden with CSS or some other problem.

      Reply
  • CarinaOctober 13, 2022 at 10:41 am

    For me everything’s working up until I place the shortcode. Then it hard links to my page and removes the buttom from the control panel. Any ideas why this happens?

    Reply
    • AlthemistOctober 13, 2022 at 11:51 am

      Hi Carina,

      That would probably depend on the shortcode. It was tested and we use it without problems on our own site, as you can see in the account menu here.

      Reply
      • CarinaOctober 13, 2022 at 2:17 pm

        it was a problem with the shortcode and it works well now! BUT when adding the snippet above with the shortcode the content with the h3 title doesn’t show any longer. Any idea how to solve this?

  • Andrea FornengoNovember 24, 2021 at 7:39 pm

    Hi, i’ve tried this code but for some reason when i click the custom tab it just hard links to my page, with no tabs on the left visible.
    How can i fix that?

    Reply
    • AlthemistNovember 25, 2021 at 12:41 pm

      Hi Andrea Fornengo,

      Most probably you missed some part of the code OR you followed the instructions without replacing the relevant content.It sounds like the endpoint is not defined properly.

      Reply
  • danielJune 21, 2020 at 8:31 am

    Great article…. but what if i want to add some content to that tab in visual composert!

    Reply
    • AlthemistJuly 8, 2020 at 9:05 am

      Unfortunately, that would not be possible, as on the product single page the WP Bakery is already in use for the Description field. It can’t be initialized twice on the same page. However, you can easily paste a WP Bakery generated shortcodes content in the “do_shortcode” portion of the function.

      Reply

Leave a Reply

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