How to define interrelated menu and action on WooCommerce "My account" page?

Question

I'm trying to create a new menu and action on my account page. Menu and action are linked.

I want to perform some actions according to the relevant order number on the new page that opens after clicking action. But after clicking the button, the main menu page opens. How can i solve this problem?

The new url would be:

• www.example.com/my-account/custom-menu/19651/

There is no problem here. However, the main menu content always appears on the opened page. That is, "Main menu content".

I'm trying to create a different content for each order status. Then I will define the main menu content with other actions here.

However, I could not solve this order-based problem. I examined the WooCommerce codes because it is similar to the View button. However, I couldn't find a solution there either.

Below is my work:

<?php
/**
* Plugin Name: Custom Menu For Customer
* Desciption: Example description
* 
* 
*/
defined( 'ABSPATH' ) || exit; 
if(!defined('New_Custom_Menu_For_Customers') ) 
    class New_Custom_Menu_For_Customers{
        public function __construct() { 
            add_action( 'init', [ $this, 'rewrite_endpoint' ] );
            add_filter( 'query_vars', [ $this, 'add_new_query_vars' ] );
            add_filter( 'the_title', [ $this, 'endpoint_title' ] );
            add_filter( 'woocommerce_account_menu_items', [ $this, 'my_account_page_order_custom_link' ], 10 );
            add_action( 'woocommerce_account_custom-menu_endpoint', [ $this, 'content_custom_menu' ] );
            add_filter( 'woocommerce_my_account_my_orders_actions', [ $this, 'order_custom_content_display_button' ], 10, 2 );
        }
    
    
        //Register new endpoint
        public function rewrite_endpoint(){
            flush_rewrite_rules();
            add_rewrite_endpoint( 'custom-menu', EP_ROOT | EP_PAGES );
        }
        
        //Register the query vars
        public function add_new_query_vars( $vars ){
            $vars[] = 'custom-menu';
            return $vars;
        }
        
        //Define new endpoint 
        public function my_account_page_order_custom_link( $menu_links ) {
            $menu_links['custom-menu'] = __( 'Custom Menu', 'a-text-domain' );
            return $menu_links;
        }
        
        //Menu content
        function content_custom_menu(){
            //Get all orders...
            
            echo '<p> Main menu content</p>';
        }
        
        //New action button define
        public function order_custom_content_display_button( $actions, $order ) {
            $url = esc_url_raw( wc_get_account_endpoint_url( 'custom-menu' ) . $order->get_id() );
            $actions['custom'] = array( 'url' => $url, 'name' => __( 'Display', 'a-text-domain' ) );
            return $actions; 
            
        }
        /*
        New page content after clicking the button...
        $order = wc_get_order( $order_id );
        ...
        
        
        */
    }
    
    $custom_menu_for_customer = new New_Custom_Menu_For_Customers();
}

Answer 1

"I examined the WooCommerce codes because it is similar to the View button"

You assume that after clicking the view button on the /my-account/orders page, that the url changes to /my-account/orders/1234 but that is not the case, the url currently opening is /my-account/view-order/1234/ , so it display another template file.

So take this into account in your current code or change the content_custom_menu() callback function to something like:

function content_custom_menu() {
    global $wp;

    if ( isset( $wp->query_vars['custom-menu'] ) && is_numeric( $wp->query_vars['custom-menu'] ) ) {
        echo 'I have an ID = ' . $wp->query_vars['custom-menu'];
    } else {
        echo '<p>Main menu content</p>';
    }
}