The default WooCommerce My Account tabs are many. Sometimes, they’re too many. In this post, we will see how to “merge” two tabs into a single one.
For example, how can we move the content of the “Edit Address” tab into the “Edit Account” tab – and save users some navigation time?
PHP Snippet: Merge Two My Account Tabs @ WooCommerce My Account Page
Merging two tabs means hiding a tab, and after that moving its content to another tab. Super easy, and you can apply this to any tab, as long as you change the snippet below with the correct name of the tabs (or endpoints, like WooCommerce calls them).
/**
* @snippet Merge Two "My Account" Tabs @ WooCommerce Account
* @how-to https://businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli
* @compatible WooCommerce 5.0
* @community https://businessbloomer.com/club/
*/
// -------------------------------
// 1. First, hide the tab that needs to be merged/moved (edit-address in this case)
add_filter( 'woocommerce_account_menu_items', 'bbloomer_remove_address_my_account', 999 );
function bbloomer_remove_address_my_account( $items ) {
unset( $items['edit-address'] );
return $items;
}
// -------------------------------
// 2. Second, print the ex tab content (woocommerce_account_edit_address) into an existing tab (woocommerce_account_edit-account_endpoint). See notes below!
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );
// NOTES
// 1. to select a given tab, use 'woocommerce_account_ENDPOINTSLUG_endpoint' hook
// 2. to print a given tab content, use any of these:
// 'woocommerce_account_orders'
// 'woocommerce_account_view_order'
// 'woocommerce_account_downloads'
// 'woocommerce_account_edit_address'
// 'woocommerce_account_payment_methods'
// 'woocommerce_account_add_payment_method'
// 'woocommerce_account_edit_account'
Is There a (Reliable) Plugin For That?
If you’d love to code but don’t feel 100% confident with PHP, I decided to look for a reliable plugin that achieves the same result.
In this case, I recommend the YITH WooCommerce Customize My Account Page plugin. On top of merging My Account tabs, you can also move the tab menu around, customize the color scheme, add banners, set up reCaptcha on the register and login forms, sort, rename, delete tabs, conditionally show tabs to a given user role and much more.
But in case you hate plugins and wish to code (or wish to try that), then keep reading 🙂
Hello, how do i merge more than 2 tabs into one? I’m trying to merge both the payment-methods tab as well as the edit-address tab into the edit-account tab but can’t seem to figure out the code. Thanks!
Hello Avelin thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I was just wondering if, rather than merging into the same endpoint, we move the menu options into a submenu for a parent endpoint.
i.e.
<li>Orders</li> <li>Account Details</li> <ul> <li>Payment Methods</li> <li>Addresses</li> ... etcI guess that’s an option as well. Will require some customization
What is 999 there and what about the word “bbloomer” you used in your code? What should I replace it with?
I recommend to keep the 999 (priority) but you can change “bbloomer” to whatever you like
Using these actions/hooks, is it possible to actually add the billing and shipping forms in the account page? Rather than links to the edit billing/shipping, the actual forms are there?
I’m pretty sure that’s possible!
Hi.
Can I also merge Woocommerce Membership tabs? I want to move content to “MY ACCOUNT DETAILS” from “MANAGE” to display the membership details. But I can’t find the correct name for this last tab to complete the snippet.
I would really appreciate your help!
Hi Diego, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Not sure what I am doing wrong, but when I add this snippet the whole side menu disappears :O I haven’t changed anything about it.
Any ideas?
Uhm, not sure. Tried also on Storefront theme or 2020?
When I merge the address to edit-account tab, the content in address will be right below the content in edit-account, i.e. the fields to edit address will be below the save changes button which is in edit-account tab.
It looks weird that after the save changes button, there is still fields to be edited.
Any idea to organize the structure?
Hi Chemin, you’ll need a bit of CSS for that
Great approach except that endpoint url will not follow your new rules. For instance, if you edit a payment method and validate the form and will redirect to the default endpoint and your custom will be lost in the navigation. I’m trying to change the URL too but it doesn’t seem to be posible.
Good point – I’m sure there is a way to change redirect URL though
Hey Aurélien,
I’ve overcome this problem – all you have to do is go setting and change the end points of each page. Everything seems to be working fine for me 🙂 good luck buddy, if you need help feel free to contact me
hi i merged the dashboard tab and a custom tab i created. now i want to separate them. I removed this line of code below but it still wont be separated.
any ideas please?
#BloomerArmada
Hey Busola, thanks for your comment. Did you remove the first part of the snippet as well?
Maybe you touched on this, but is there a reason why bbloomer is within the code?
Hey Joshua, thanks for your comment! That’s how I name my PHP functions, you can use whatever name you like 🙂
hi Rodolfo, may i know is it possible to show edit-address form without clicking the edit. It means when i click address it will automatically allow user to edit their form.
Hello there, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Works great! In your example, how would you move the edit address output before the edit account form?
Hey Helms, you could try taking a look at the plugins listed here: https://businessbloomer.com/woocommerce-how-to-customize-the-my-account-page/
Hello,
I’ve tried to change the endpoints but I actually cannot merge the Order tab into the Downloads one. Any suggestion?
Thanks!
Antonio
Hey Antonio, thanks for your comment! You’ll need to find out the exact hook and functions of the tab you want to move, sorry but this is custom work 🙂
This is fantastic, Rodolfo. Can’t wait to implement it! Thank you!!! 🙂
Fantastic 🙂