isotropic-2022
Share
Blog
Search
Menu

WooCommerce Account Tabs: How To Reorder, Rename, Add and Remove

By James LePage
 on January 3, 2022
Last modified on January 6th, 2022

WooCommerce Account Tabs: How To Reorder, Rename, Add and Remove

By James LePage
 on January 3, 2022
Last modified on January 6th, 2022

This article introduce a simple code snippet that will allow you to easily re-order, rename, add, and remove WooCommerce account tabs with ease.

The WooCommerce customer account area is the central hub wear store customers can edit their account, access previous orders, and fulfill other specific tasks related to their account. In many situations, you'll want to add additional tabs, or rename existing ones to make for a better user experience. There are many plug-ins out there that will help you do this, but if you simply need to re-order, rename, add, or remove a WooCommerce account tab you can use the following code snippet.

<?php function iso_reorder_my_account_menu() {     $newtaborder = array(         'learner-profile'    => __( 'Profile', 'woocommerce' ),         //'dashboard'          => __( 'Dashboard', 'woocommerce' ),         'orders'             => __( 'Previous Orders', 'woocommerce' ),         'edit-address'       => __( 'Addresses', 'woocommerce' ),         'payment-methods'       => __( 'Payment Methods', 'woocommerce' ),         //'edit-account'       => __( 'Account Details', 'woocommerce' ),         'customer-logout'    => __( 'Logout', 'woocommerce' ),     );     return $newtaborder; } add_filter ( 'woocommerce_account_menu_items', 'iso_reorder_my_account_menu' );

As snippets go, this is a simple one. The order of the tabs is the order that they will be displayed on the front end. You can simply move each line around to get the WooCommerce account menu order that you want.

You can add new tabs by adding new lines within the array like so:

'learner-profile' => __( 'Profile', 'woocommerce' ),
Code language: PHP (php)

You can hide or remove WCs account tabs by removing their line from the code. You can see here that we commented out the edit account tab, which means it won't show on the front end.

The tabs within the array are pretty simple. They are identified by their endpoint, which displays in the URL like so: site.com/my-account/learner-profile. Then, you specify the label.

You can install this on your website by using a custom plugin, code snippet manager, or by pasting it into your themes functions.php file.

If you were looking for another way to remove WooCommerce account tabs from the front end, this is another codes snippet that will get you to the same result: https://isotropic.co/how-to-remove-woocommerce-product-tabs-no-plugin/

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kayla
Kayla
3 months ago

This was super helpful. Thank you! I'm hoping you can help me further... I have added a custom tab to my account menu using this snippet. It is not a default WC account page. How would I get the account menu to display along the left side like the other account pages? Thank you so much for your help!

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram