13

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?

enter image description here

1

2 Answers 2

28
+50

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:

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.

2
  • Hello, I'm trying this method, by adding the code into functions.php, but I get the links only in the top navigation, not also in the side menu, any suggestion?
    – alexcr
    Commented May 21, 2020 at 14:20
  • @alexcr Both the sidebar and header are handled by your theme, not by the plugin WC. WC just implements templates and hooks which are up to theme devs and integrators to include or not.
    – ClemC
    Commented May 25, 2020 at 6:36
6

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');
});
1
  • 1
    It's also useful to use the register_activation_hook() function to register an activation method to call flush_rewrite_rules() so that you don't repeatedly purge the rules on page load, and so that you don't need to remember to save the permalinks. This way it'll only run one time on activation and will "just work". Remember to do add_rewrite_endpoint() before it so it registers, though. Commented May 10 at 22:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.