WooCommerce My Account Menu

WooCommerce Default My Account menu.
This is how “My Account” menu looks by default.

How to Remove Tabs from My Account menu. How to Remove their Endpoints as well and Make the Appropriate Pages to Return 404.

Probably, it is the most easiest part of this tutorial. For example let’s imagine that our e-commerce shop doesn’t sell physical goods – and in that case maybe we do not need Addresses section (yes, I know that Billing Address details are also there, but we’re just learning now). Or maybe you want to remove Downloads from WooCommerce my account menu. Both are possible.

I hope you know where to insert all the code from this post, if not – to functions.php. The result:

WooCommerce My Account menu with removed Addresses link.

It was simple enough, but we have not finished yet, if you go to /my-account/edit-address/ directly, it will show you Addresses page. This should not happen, should it?

The first thought that came to my mind was to remove endpoints somehow. Dealing with $wp_rewrite or something like that. Please do not!

The above code is good. But when you want to remove both the menu item and its page as well, you do not need any coding. You can find all the default My Account subpages in WooCommerce > Settings > Account. All you need is just to set a specific endpoint empty.

WooCommerce Edit My Account Endpoints in Settings

How to Rename Tabs in My Account

Can be done with the same woocommerce_account_menu_items, all you need is to know a tab ID you would like to rename, all of them were mentioned above.

The same way you can rename any menu item you want ????

Add My Account Menu Links with Custom URLs

There is no specific filter for that but I will show you a very simple trick. In the first part of the code we will add a new element to menu items array (if you have experience with adding columns to admin Dashboard earlier, this code will be familiar to you).

In the second part of the code we’ll just hook its URL.

But what about the menu icon?

If you use WooCommerce StoreFront theme, this question could appear in your mind. Really, how to add your own beautiful icon there?

Let’s begin with the point that StoreFront uses Font Awesome icon collection. So, go to their official website, choose any icon and find its unicode code.

Font Awesome: Where to find icon unicode string.

Once you found it, use it in CSS:

This is how My Account menu looks for me now:

Here we added custom My Account menu link with its own icon.
Custom tabs in WooCommerce My Account

Add Custom My Account Menu Tabs with their Own Pages

Well, this part of the tutorial is also simple enough and consists of 4 steps. Sometimes people forget about 4th step, but it is as much important as the others.

So, here is how to add additional menu items with custom pages:

I also took care of the icon.

Now, if you go to /my-account/log-history/ or click the appropriate menu item, this page should appear.

Custom My Account menu element with its own page.

Actually this is all I wanted to show you, but below is a small bonus.

Two WordPress Action Hooks that Allows to Add Any Content Before and After WooCommerce My Account Menu

So, using the action hooks below you can add any text or HTML code just before and just after the menu 

Viết bình luận

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.