In this video I’m going to show you how to add Woocommerce my account tabs. Also, I’m going to show you how to remove, rename and reorder them with the couple of clicks. So, if you’re ready then jump in.
NB! In order to use all those snippets shown in this post you need add them inside your child theme’s functions.php file or better yet, use Code Snippets plugin. This way you’re not going to lose these modifications in case you’re switching your theme.
Video: How to add, rename, remove and reorder Woocommerce My Account tabs?
Please take a look at the video here below because this way it will be much easier for you to understand how to accomplish all that and add Woocommerce my account tabs..
How to add Woocommerce My Account tabs?
It’s time to take a closer look on how to add Woocommerce My Account tabs. I’m going to show you to example. With the first of them we’ll add a support tab and with the other one we will merge Learndash profile into Woocommerce my account. (see the screenshot below).
So, go to Snippets >> Add new and give the snippet a title. Fo example “Support tab”. Next, paste this code snippet inside the code box. Pay attention that there is a shortcode and content inside Step 4, so don’t forget to change it accordingly.
// Add Woocommerce My Account tab for Support
// 1. Register new customer-support endpoint (URL) for My Account page
add_action( 'init', 'add_support_endpoint' );
function add_support_endpoint() {
add_rewrite_endpoint( 'customer-support', EP_ROOT | EP_PAGES );
}
// 2. Add new query var
add_filter( 'query_vars', 'support_query_vars', 0 );
function support_query_vars( $vars ) {
$vars[] = 'customer-support';
return $vars;
}
// 3. Insert the new endpoint into the My Account menu
add_filter( 'woocommerce_account_menu_items', 'add_new_support_tab' );
function add_new_support_tab( $items ) {
$items['customer-support'] = 'Support';
return $items;
}
// 4. Add content to the added tab
add_action( 'woocommerce_account_customer-support_endpoint', 'support_tab_content' ); // Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
function support_tab_content() {
echo '<h4><strong>Support</strong></h4>
<p>Fermentum tristique non imperdiet vulputate ridiculus platea arcu suspendisse donec</p>';
echo do_shortcode( '[fluentform id="1"]' ); // Here goes your shortcode if needed
}
// 5. Go to Settings >> Permalinks and re-save permalinks. Otherwise you will end up with 404 Page not found errorAlso, don’t forget to go to Settings >> Permalinks and resave your permalinks
How to merge Leardash profile and Woocommerce My account page?
I have made an in-depth tutorial on how to merge Learndash and Woocommerce but today I’m just going to show how to show Learndash profile inside Woocommerce my account. You just need to add this snippet here below.
// 1. Register new purchased-courses endpoint (URL) for My Account page
add_action( 'init', 'add_lms_endpoint' );
function add_lms_endpoint() {
add_rewrite_endpoint( 'purchased-courses', EP_ROOT | EP_PAGES );
}
// 2. Add new query var
add_filter( 'query_vars', 'courses_query_vars', 0 );
function courses_query_vars( $vars ) {
$vars[] = 'purchased-courses';
return $vars;
}
// 3. Insert the new endpoint into the My Account menu
add_filter( 'woocommerce_account_menu_items', 'add_new_courses_tab', 40 );
function add_new_courses_tab( $items ) {
$items['purchased-courses'] = 'Your courses';
return $items;
}
// 4. Add content to the added tab
add_action( 'woocommerce_account_purchased-courses_endpoint', 'course_tab_content' ); // Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
function course_tab_content() {
echo '<h4><strong>All your courses</strong></h4>
<p>Fermentum tristique non imperdiet vulputate ridiculus platea arcu suspendisse donec</p>';
echo do_shortcode( ' [ld_profile]' ); // Here goes your shortcode if needed
}As before, don’t forget to go to Settings >> Permalinks and resave your permalinks
How to remove Woocommerce my account tabs?
There are a bunch of Woocommerce endpoints, and maybe you don’t need a couple of them and therefore let’s see how to remove Woocommerce my account tabs. For example, let’s remove Downloads tab (endpoint). It’ s fairly easy. Go to Woocommerce >> Settings >> Advandes and take a look at the “Account endpoints” section.
Now find Downloads and delete content from it and save changes (see the screenshot).
This will remove Downaods endpoint from your Woocommerce My account page.
How to remove Woocommerce Dashboard tab from My account page?
Although you can remove all other tabs, you cannot use this method shown above to remove Woocommerce Dashboard tab from my account page. To accomplish that, use this snippet here instead.
function remove_dashboard_tab($items) {
unset($items['dashboard']);
return $items;
}
add_filter ('woocommerce_account_menu_items', 'remove_dashboard_tab');How to reorder Woocommerce my account tabs?
Now let’s take a look at how to remove Woocommerce my account tabs. Since we added two tabs (Support and Your courses) earliel they will end up down bottom on the tabs list. I would like to reorder their location. So, let’s add this code to the code snippets.
// Reorder Woocommerce my account tabs?
function change_my_account_menu_order() {
$menuOrder = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
'purchased-courses' => __( 'Your courses', 'woocommerce' ),
'customer-support' => __( 'Support', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => __( 'My ddresses', 'woocommerce' ),
'edit-account' => __( 'Account Details', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' )
);
return $menuOrder;
}
add_filter ( 'woocommerce_account_menu_items', 'change_my_account_menu_order' );Pay attention that you need to add all the active tabs inside this code. If you have removed Downloads as I showed previously then don’t add Downloads in the list. Now just reorder them as you like. As you see Your Courses is in the 3rd position and Support is fourth.
ALSO don’t forget to pay attentio to the endpoint URL-s part ins the code ( ‘purchased-courses’ for example).
How to rename Woocommerce my account tabs?
If you need to rename Woocommerce my account tabs then take the code shown in the previous step and just rename your tab names. For example, I’m going to rename Dashboard to My dashboard and Orders to My orders.
function rename_my_account_menu_order() {
$menuOrder = array(
'dashboard' => __( 'My dashboard', 'woocommerce' ),
'orders' => __( 'My orders', 'woocommerce' ),
'purchased-courses' => __( 'Your courses', 'woocommerce' ),
'customer-support' => __( 'Support', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => __( 'My ddresses', 'woocommerce' ),
'edit-account' => __( 'Account Details', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' )
);
return $menuOrder;
}
add_filter ( 'woocommerce_account_menu_items', 'rename_my_account_menu_order' );If you need to reorder and rename them together then use one snippet for both.
Well, that’s basically it. Now you know how to rename, remove, reorder and add Woocommerce My Account tabs?
