Amit

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 '<h3>Section Heading</h3>';

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 '<h3>Section Heading</h3>';

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

Last Update on:March 5th, 2023 at 5:19 pm


How to limit acf field value in WordPress
Previous post