How to Add New Tab to My Account Page in WooCommerce

/**
 * tested with WooCommerce version 5.1.0
 */

// STEP 1. Add new endpoint to use on the My Account page

// IMPORTANT*: After uploading Permalinks needs to be rebuilt in order to avoid 404 error on the newly created endpoint
   
function ab_new_section_endpoint() {
    add_rewrite_endpoint( 'new-section', EP_ROOT | EP_PAGES );
}
   
add_action( 'init', 'ab_new_section_endpoint' );
   
   
// 2. Add new query var
   
function ab_new_section_query_vars( $vars ) {
    $vars[] = 'new-section';
    return $vars;
}
   
add_filter( 'query_vars', 'ab_new_section_query_vars', 0 );
   
// 3. Insert the new endpoint into the My Account menu
   
function ab_new_section_link_my_account( $items ) {
    $items['new-section'] = 'New Section';
    return $items;
}
   
add_filter( 'woocommerce_account_menu_items', 'ab_new_section_link_my_account' );
   

// 4. Add content to the new endpoint
   
function ab_new_section_content() {
echo '

Section Heading

'; echo ' your custom content goes here '; } add_action( 'woocommerce_account_new-section_endpoint', 'ab_new_section_content' ); // Note: add_action must follow'woocommerce_account_{your-endpoint-slug}_endpoint' format

Use a Shortcode for Content
You could even use the core WordPress function do_shortcode and render a pre-defined shortcode in your custom tab. In order to do that, just replace the part defining the content with something like this:

// 4. Add content to the new endpoint
   
function ab_new_section_content() {
echo '

Section Heading

'; echo do_shortcode( ' /* [your-shortcode-goes-here] */ ' ); }

Leave a Reply

Your email address will not be published. Required fields are marked *