How to add new tab in my-account page at woocommerce

If you have a service-selling website with WooCommerce and want to show which service a client purchased in another custom tab on the my-account page in WooCommerce, you’ll need to create a custom my-account tab. In this article, we’ll explain how to add a new tab to the my-account page using two different methods: coding a PHP snippet or using a my-account page customizer plugin.

Method 1: Adding a New Tab by Code Snippet

To add a tab using PHP coding, follow these four steps:

Step 1: Register a New URL/Slug

The first step is to register a new URL/slug to use for the tab URL endpoint. This will look something like example.com/my-account/orders/. For our custom tab, we’ll use example.com/my-account/booking-list/.

To register this URL, add the following PHP code to the theme’s functions.php file:

 
function thedailywp_add_booking_list_endpoint() { 
add_rewrite_endpoint( 'booking-list', EP_ROOT | EP_PAGES ); 
}

add_action( 'init', 'thedailywp_add_booking_list_endpoint' );
 

Step 2: Query Content for Your Tab

Next, you’ll need to add a new query var to query content for your tab. Use the following PHP code:

 
function thedailywp_booking_list_query_vars( $vars ) { $vars[] = 'booking-list'; return $vars; }

add_filter( 'woocommerce_get_query_vars', 'thedailywp_booking_list_query_vars', 0 ); 

Step 3: Insert the New Tab in the My Account Page Tab Menu

To add the new tab to the my-account page tab menu, use the following PHP code:

 function thedailywp_add_booking_list_link_my_account( $items ) { $items['booking-list'] = 'Booking Lists'; return $items; }

add_filter( 'woocommerce_account_menu_items', 'thedailywp_add_booking_list_link_my_account' ); 

Step 4: Add Booked Session List Inside Your Menu

Finally, you’ll need to add the booked session list inside your menu using this PHP code:

 function thedailywp_booking_list_content() { echo '<h3>You Booked Session</h3>';
<div class="bg-black rounded-md mb-4"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">arduino</div></div><div class="bg-black rounded-md mb-4"><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-arduino"><span class="hljs-function">echo <span class="hljs-title">do_shortcode</span><span class="hljs-params">( <span class="hljs-string">' /* your shortcode here */ '</span> )</span></span>;
</code></div></div>
}

add_action( 'woocommerce_account_booking-list_endpoint', 'thedailywp_booking_list_content' ); 

Be sure to put all the code together in functions.php and reset the permalink from Settings > Permalink.

Method 2: Adding a New Tab by Plugin

You can also add a new tab using a my-account page customizer plugin. One such plugin is Customize My Account for WooCommerce. With this plugin, you can customize the Tabs menu, reorder it by drag and drop, add a new tab, or hide core tabs. There are both free and premium versions of this plugin.

The free version of the plugin includes these features:

• Show/hide WooCommerce main tabs
• Reorder core WooCommerce my account tabs
• Show user avatar on my account page
• Drag and drop UI

To get this plugin, go to Customize My Account for WooCommerce.

Managing My Account Tabs

Using these two methods, you can manage my account tabs on your WooCommerce website. If you’re still having trouble or aren’t able to achieve what you need, feel free to comment below. We’ll do our best to help you out!