WooCommerce comes with a powerful My Account page that allows your customers to view orders, manage addresses, and access downloads. However, sometimes store owners need to display custom content like premium support forms, subscription info, or custom guides directly on the account page.

This tutorial will show you how to add a custom tab to the My Account page in WooCommerce and display any content or shortcode inside it. By the end of this guide, you’ll be able to create personalized account tabs to enhance user experience, provide extra support, or showcase custom resources.

Why Add a Custom Tab?

Adding a new tab can help you:

• Improve the user experience and engagement on your website.

• Offer premium support to select users.

• Display custom WooCommerce account info.

• Show downloadable resources or guides.

Step 1: Register a New Endpoint

WooCommerce uses endpoints (URL slugs) to generate dynamic content on the My Account page. We first need to register a new endpoint for our custom tab.

// Register new endpoint for My Account page
function custom_add_premium_support_endpoint() {
    add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'custom_add_premium_support_endpoint' );

Pro Tip: After adding this code, go to Settings → Permalinks and click Save Changes to refresh URL rules. Otherwise, your new tab might return a 404 error.

Step 2: Add the Endpoint as a Query Variable

Next, WooCommerce needs to recognize this endpoint as a query variable in the URL.

// Add new query var for the endpoint
function custom_premium_support_query_vars( $vars ) {
    $vars[] = 'premium-support';
    return $vars;
}
add_filter( 'query_vars', 'custom_premium_support_query_vars', 0 );

This ensures WooCommerce can identify requests to yourstore.com/my-account/premium-support/ and load the correct content.

Step 3: Add the New Tab to the My Account Menu

Now, let’s insert the new tab into the My Account menu so customers can click on it.

// Add custom tab to My Account menu
function custom_add_premium_support_link_my_account( $items ) {
    $items['premium-support'] = 'Premium Support';
    return $items;
}
add_filter( 'woocommerce_account_menu_items', 'custom_add_premium_support_link_my_account' );

You can change 'Premium Support' to any name that fits your store (e.g., Membership Info, Order Support).

Step 4: Display Content Inside the New Tab

Finally, display custom content inside the tab. This can be HTML, text, or a WordPress shortcode.

// Display content for the new tab
function custom_premium_support_content() {
    echo '<h3>Premium WooCommerce Support</h3>';
    echo '<p>Welcome to the WooCommerce support area. As a premium customer, you can submit a ticket if you encounter any WooCommerce issues with your website, snippets, or customizations. <i>Please contact your theme/plugin developer for theme/plugin-specific support.</i></p>';

    // Example: Display a contact form via shortcode
    echo do_shortcode('[contact-form-7 id="1234" title="Premium Support"]');
}
add_action( 'woocommerce_account_premium-support_endpoint', 'custom_premium_support_content' );

Important: The add_action format must be:
'woocommerce_account_{your-endpoint-slug}_endpoint'

Tips for Custom Tabs

1. Use Shortcodes:
   Embed forms, tables, or dynamic content without touching code.
2. Custom Styling:
   Add CSS targeting .woocommerce-MyAccount-content to style your tab content.
3. Multiple Tabs:
   You can create multiple endpoints for different features like subscription-info, rewards, or downloads.
4. Compatibility:
   This method is compatible with WooCommerce 5+ and most themes that follow standard WooCommerce templates.

Result

After implementing the above steps:

• Your My Account page will have a new “Premium Support” tab.
• Customers can access a custom support area without leaving their account page.
• You can display any custom content, like FAQs, videos, or premium guides.