WooCommerce : Add New Tab In My Account Page.

We Are Web developer and Adding a Tab in WooCommerce My Account page with custom content is one of the most common customization requests which we receive From The clients.
This Postis regarding how to add custom tab on WooCommerce My Account page.

How Will We Do That?

Adding a Tab in WooCommerce my account page it not to difficult. let’s distribute in 4 steps.

1. Register new endpoint.
2. Add query var.
3. Insert endpoint into the My Account menu.
4. Add content to the newly added endpoint.

Step 1 :Register new endpoint.

My Account area in WooCommerce is Totally based on “endpoints”. their is only one page “my-account”, other sub pages like “my-account/edit-account” etc are loaded dynamically.

So first we need to add a new endpoint for our new dynamic sub page.We have to use ‘add_rewrite_endpoint’ Function.

function AddCustomTabEndpoint() {
  add_rewrite_endpoint('my-custom-tab', EP_ROOT | EP_PAGES );
}
add_action('init','AddCustomTabEndpoint' );

Step 2 :Add query var. We have to use ‘query_vars’ Filter.

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

Step 3 :Insert the new endpoint into the My Account menu. We have to use ‘woocommerce_account_menu_items’ Filter.

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

Step 4 :Add content to the new endpoint. We have to use ‘woocommerce_account_{your-endpoint-slug}_endpoint’ Hook.

function MyCustomTabContent() {
  echo "<h3>My Custom Tab</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>";
}
add_action('woocommerce_account_my-custom-tab_endpoint','MyCustomTabContent');