When you add a custom My Account tab, or when you’re not happy with the default My Account tabs order (Dashboard – Orders – Downloads – Addresses – Payment methods – Account details – Logout), you may need to change things around.
Here are two super simple snippets to achieve just that: reorder the My Account tabs, so your customers never miss that super important My Account section. Enjoy!
PHP Snippet 1: Move Single Tab @ My Account
This is the easiest, and cleanest, WooCommerce customization. Once you take a look at Snippet 2 you will understand why.
In this case scenario we want to place “Orders” between “Downloads” and “Addresses”: we use array_slice() to split the existing array of tabs in two parts, insert our tab in a specific position, and merge.
/**
* @snippet Move one tab @ My Account
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 6
* @community https://businessbloomer.com/club/
*/
add_filter( 'woocommerce_account_menu_items', 'bbloomer_add_link_my_account' );
function bbloomer_add_link_my_account( $items ) {
$save_for_later = array( 'orders' => __( 'Orders', 'woocommerce' ) ); // SAVE TAB
unset( $items['orders'] ); // REMOVE TAB
$items = array_merge( array_slice( $items, 0, 2 ), $save_for_later, array_slice( $items, 2 ) ); // PLACE TAB AFTER POSITION 2
return $items;
}
PHP Snippet 2: Reorder Multiple Tabs @ My Account
When you need to rearrange the whole My Account tab menu, slicing the array to place a tab in between is not sufficient any longer. You must redefine the whole array with a custom order, and return it back.
The default array is this:
$items = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ),
'payment-methods' => __( 'Payment methods', 'woocommerce' ),
'edit-account' => __( 'Account details', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
So, in this snippet, we’re simply using a similar array, just with a custom sorting:
/**
* @snippet Reorder tabs @ My Account
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 6
* @community https://businessbloomer.com/club/
*/
add_filter( 'woocommerce_account_menu_items', 'bbloomer_add_link_my_account' );
function bbloomer_add_link_my_account( $items ) {
$newitems = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
'edit-address' => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ),
'edit-account' => __( 'Account details', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'payment-methods' => __( 'Payment methods', 'woocommerce' ),
);
return $newitems;
}
Thank you for these tips. Is there a way to have a separate shortcode for each “My account” tab in order to insert them in a custom dashboard?
Best regards.
Hello Kambro, 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!