
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.
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?
Can’t really tell. Could be hidden with CSS or some other problem.
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?
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.
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?
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?
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.
Great article…. but what if i want to add some content to that tab in visual composert!
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.