Add a new view on the Woocommerce account page

Question

I'm working on a custom Woocommerce theme. I've already figured out how to add the Wishlist label to the Woocommerce my account navigation. When you click on the Wishlist navigation item, you go to domain.com/my-account/wishlist. But it the "view" doesn't exist yet.

/*
* Register new wishlist endpoint
*/
function add_wishlist_endpoint() {
    add_rewrite_endpoint( 'wishlist', EP_ROOT | EP_PAGES );
}

add_action( 'init', 'add_wishlist_endpoint' );


/*
* Register new wishlist endpoint
*/
function wishlist_query_vars( $vars ) {
    $vars[] = 'wishlist';
    return $vars;
}

add_filter( 'query_vars', 'wishlist_query_vars', 0 );

So I've created a new file my-wishlist.php in my theme in the Woocommerce folder (themes/my-theme/woocommerce/myaccount/my-wishlist.php)

<?php
    if ( ! defined( 'ABSPATH' ) ) {
        exit;
    }

    echo do_shortcode('[yith_wcwl_wishlist]');
?>

I want that the my-wishlist.php file is shown on the right side of the navigation like the orders, addresses, account details. So when you click on the Wishlist menu item, you still see the account navigation on the left side.

My account page template looks like this:

<sidebar>
<?php 
    do_action( 'woocommerce_account_navigation' );
?>
</sidebar>

<main>
<?php
    do_action( 'woocommerce_account_content' );
?>
</main>

Answer 1

 add_action('woocommerce_account_wishlist_endpoint', function() {
    $wishlists = [];

    wc_get_template('myaccount/my-wishlist.php', [
        'wishlists' => $wishlists
    ]);
});