How to modify navigation menu of the "My Account" page in WooCommerce

Question

I want to modify the WooCommerce "My Account" left side navigation menu.

For that, I have made changes in the woocommerce/templates/myaccount/navigation.php. The problems with this approach are:

• I can add the new items only at the first or last position in the menu. I'd need them at the 2nd and 3rd position instead....
• If WC gets updated, it could change...

What is the best way to customize the WooCommerce "My Account" navigation menu at my convenience?

Answer 1

For that, you do not need to modify the woocommerce/templates/myaccount/navigation.php.

The best way to customize the "My Account" navigation menu items is to use:

• woocommerce_account_menu_items filter hook to add new items to the menu.
• array_slice() to reorder them the way you want.

This way, by using woocommerce_account_menu_items filter hook, you integrate perfectly your own items to WC, indeed:

• Possibility to redefine your own item endpoints via the WC "Account" settings page.
• WC updates automatically the item link's URL when, for example, a modification is done to the permalink settings/structure.

Code example:

// Note the low hook priority, this should give to your other plugins the time to add their own items...
add_filter( 'woocommerce_account_menu_items', 'add_my_menu_items', 99, 1 );

function add_my_menu_items( $items ) {
    $my_items = array(
    //  endpoint   => label
        '2nd-item' => __( '2nd Item', 'my_plugin' ),
        '3rd-item' => __( '3rd Item', 'my_plugin' ),
    );

    $my_items = array_slice( $items, 0, 1, true ) +
        $my_items +
        array_slice( $items, 1, count( $items ), true );

    return $my_items;
}

Note 1: The link's url of your items is defined automatically by WC here. To do that, WC simply append the item endpoint defined in the filter above to the "My account" page URL. So define your item endpoints accordingly.

Note 2: In your question, it seems like you modified the WooCommerce template directly in core...
woocommerce/templates/myaccount/navigation.php
When you have to modify a WC template, the correct way to do it is to duplicate the template's path relative to the woocommerce/templates folder into your theme/plugin's woocommerce folder. For example in our case, you'd have to paste the template into:
child-theme/woocommerce/myaccount/navigation.php.

Answer 2

Well customizing Woocommerce account and adding new items comes in a few steps,

First Step: Create Links:

You should use woocommerce_account_menu_items filter to modify existing menu items or adding new menu items, for example i add an item called Wishlist

add_filter( 'woocommerce_account_menu_items', function($items) {
    $items['wishlist'] = __('Wishlist', 'textdomain');

    return $items;
}, 99, 1 );

Note: I've gone through simplest way, you can use array_slice if you want to put menu item at your desired position.

P.s: If you want to remove or modify existing items you can do it like this:

add_filter( 'woocommerce_account_menu_items', function($items) {
    unset($items['downloads']); // Remove downloads item
    $items['orders'] = __('My Orders', 'textdomain'); // Changing label for orders

    return $items;
}, 99, 1 );

Step 2: Add rewrite end points:

For each item you add you're gonna need to add an endpoint:

add_action( 'init', function() {
    add_rewrite_endpoint( 'wishlist', EP_ROOT | EP_PAGES );
    // Repeat above line for more items ...
} );

Note that after you add new endpoints you need to flush rewrite rules by either going to wp-admin/settings/permalinks and clicking update button or with flush_rewrite_rules() function

Step 3: Display new item content

To display content for your newly added items you should use woocommerce_account_{myEndPoint}_endpoint action, for our example i created a file called wishlist.php in my themes directory under woocommerce/myaccount/ and display it's content like this:

add_action( 'woocommerce_account_wishlist_endpoint', function() {
    wc_get_template_part('myaccount/wishlist');
});