Add custom endpoint to woocommerce My account tabs

Step-by-Step: Add a Custom Endpoint to My Account Page

Step 1: Register a Custom Endpoint

To do this, first, we need to add an endpoint using the WordPress function called add_rewrite_endpoint() using the ‘init’ action hook like:

function wpartisan_custom_endpoint() {
	add_rewrite_endpoint( 'custom-menu', EP_PAGES  );
	if( !get_option('rw_permalinks_flushed') ) {
        flush_rewrite_rules(false);
        update_option('rw_permalinks_flushed', 1);
 
    }
}

add_action( 'init', 'wpartisan_custom_endpoint' );

In the function add_rewrite_endpoint(), the first parameter is the endpoint’s name, and the second parameter means where the endpoint will add as query arguments. For example, EP_PAGES means it will add a new rewrite rule ending with “custom-menu(/(.*))?/?$” for every page. So when you visit a URL like https://{your domain name}/my-account/custom-menu/foo/, you will see the global $wp_query object as shown in the image below.

I use the flush_rewrite_rules() function inside the custom endpoint creation function because without flushing, accessing the custom menu will result in a 404 error. You can do this manually also from Settings-> Permalinks in the admin area.

For more understanding, visit https://codex.wordpress.org/Rewrite_API/add_rewrite_endpoint.

Step 2: Add the Endpoint to My Account Menu

Now, we need to add a menu item for this custom endpoint on WooCommerce My Account page menu. To achieve this feature, we need to use the ‘woocommerce_account_menu_items’ filter like the below:

add_filter( 'woocommerce_account_menu_items', 'wpartisan_new_menu_items' );
function wpartisan_new_menu_items( $items ) {
	$items[ 'custom-menu' ] = __( 'Custom Menu', 'wpartisan' );
	return $items;
}

Step 3: Display Content for the Custom Endpoint

The final step is to display content for this custom endpoint, meaning that when you visit the URL, the specified content will appear. For that, WooCommerce provides a hook, and we can use this like below:

$endpoint = 'custom-menu';

add_action( 'woocommerce_account_' . $endpoint .  '_endpoint', 'wpartisan_endpoint_content' );

function wpartisan_endpoint_content() {
	//echo $args_val = get_query_var( 'custom-menu', 1 );
    //Custom menu content goes here
    echo 'Custom menu content goes here';    
}

Menu item order change

In addition, if you want to modify the navigation menu order of the My Account page for the newly created menu item, you need to add the code like the one below:

add_filter( 'woocommerce_account_menu_items', 'wpartisan_new_menu_items' );
function wpartisan_new_menu_items( $items ) {
	
	$items = array_slice( $items, 0, 3, true )
	+ array( 'custom-menu' => __( 'Custom Menu', 'wpartisan' ) )
	+ array_slice( $items, 3, count( $items ), true );

	return $items;
}

Then the final output will be like this: