WooCommerce : Add New Tab In My Account Page.

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. 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' );

null

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top