Skip to content

Documentation

Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

  1. Home
  2. Docs
  3. WooPack
  4. Modules
  5. My Account
  6. How to add a custom tab to WooCommerce My Account page?

How to add a custom tab to WooCommerce My Account page?

Here is how to add a custom tab to the WooCommerce My Account page.

  1. We will register a custom endpoint first. Please add the following code to the current theme’s functions.php file.
function ac_add_my_custom_endpoint() {
    add_rewrite_endpoint( 'custom-tab', EP_ROOT | EP_PAGES );
}
  
add_action( 'init', 'ac_add_my_custom_endpoint' );

This code will add a new endpoint “custom-tab” that can be accessed via URL like /my-account/custom-tab

2. Now we will going to add a query variable so that WooCommerce can recognize it.

function ac_add_custom_query_vars( $vars ) {
    $vars[] = 'custom-tab';
    return $vars;
}
  
add_filter( 'query_vars', 'ac_add_custom_query_vars', 0 );

3. Let’s display the custom tab in the My Account menu.

function ac_add_custom_menu_item_my_account( $items ) {
    $items['custom-tab'] = 'Custom Tab';
    return $items;
}
  
add_filter( 'woocommerce_account_menu_items', 'ac_add_custom_menu_item_my_account' );

4. Time to add the content for the custom tab.

function ac_custom_tab_content_my_account() {
   echo 'Congratulations! You just created a custom tab. You can add any content here or add shortcode.';
   echo do_shortcode( ' /* your shortcode here */ ' );
}
  
add_action( 'woocommerce_account_custom-tab_endpoint', 'ac_custom_tab_content_my_account' );

Note: Please re-save the permalinks structure after adding the code to avoid 404 errors.

Also, do not forget to replace the slug “custom-tab” with something real in all of these snippets of code. 🙂

🎃

SAVEBIG! Get up to 50% OFF this BFCM sale!  GRAB THE DEAL

×