How to add a custom tab to WooCommerce My Account page?
Here is how to add a custom tab to the WooCommerce My Account page.
- We will register a custom endpoint first. Please add the following code to the current theme’s functions.php file.
function ac_add_my_custom_endpoint() {
add_rewrite_endpoint( 'custom-tab', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'ac_add_my_custom_endpoint' );
This code will add a new endpoint “custom-tab” that can be accessed via URL like /my-account/custom-tab
2. Now we will going to add a query variable so that WooCommerce can recognize it.
function ac_add_custom_query_vars( $vars ) {
$vars[] = 'custom-tab';
return $vars;
}
add_filter( 'query_vars', 'ac_add_custom_query_vars', 0 );
3. Let’s display the custom tab in the My Account menu.
function ac_add_custom_menu_item_my_account( $items ) {
$items['custom-tab'] = 'Custom Tab';
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'ac_add_custom_menu_item_my_account' );
4. Time to add the content for the custom tab.
function ac_custom_tab_content_my_account() {
echo 'Congratulations! You just created a custom tab. You can add any content here or add shortcode.';
echo do_shortcode( ' /* your shortcode here */ ' );
}
add_action( 'woocommerce_account_custom-tab_endpoint', 'ac_custom_tab_content_my_account' );
Note: Please re-save the permalinks structure after adding the code to avoid 404 errors.
Also, do not forget to replace the slug “custom-tab” with something real in all of these snippets of code. 🙂