Add Custom Tab To Woocommere My Account Navigation

Adding a custom tab to the WooCommerce My Account navigation allows store owners to enhance user experience by providing quick access to additional pages, such as support, special offers, or custom dashboards. By using the woocommerce_account_menu_items filter, developers can easily add a new menu item without modifying core files.

This method ensures compatibility with future WooCommerce or WordPress updates while keeping the navigation structure clean and user-friendly. Additionally, developers can control the position of the custom link by adjusting the array order, ensuring seamless integration with existing menu items.

How to Use Actions to Achieve Add Custom Tab To Woocommere My Account Navigation

To make the custom link functional, a callback function needs to be registered using the add_action( 'woocommerce_account_{endpoint}_endpoint', 'custom_function' ) hook. This function renders the content when users click on the new menu item. Whether linking to an external resource or embedding a custom page, this approach allows for extensive customization. Store owners can leverage this feature to provide personalized experiences, such as exclusive discounts or account-related information, enhancing customer engagement and retention.

Best way to add custom php code in WordPress

✅ Use the Koolak Custom Code Plugin to add php code in WordPress. it’s very easy to add php code to wordpress. we have a full article on how to add php to wordpress without editing theme files.

Complete Code For Add Custom Link To Woocommere My Account – External Link

With This Method you Can Add an external link to woocommerce my account page

add_filter( 'woocommerce_account_menu_items', 'add_custom_item_to_my_account_menu', 10, 1 );
function add_custom_item_to_my_account_menu( $menu_links ) {
// Add the custom item before the Logout item.
$logout = $menu_links['customer-logout']; // Save the Logout menu item.
unset( $menu_links['customer-logout'] ); // Remove the Logout item temporarily.

// Add your custom item.
$menu_links['custom-link'] = 'Custom Item';

// Re-add the Logout item.
$menu_links['customer-logout'] = $logout;

return $menu_links;
}

add_filter( 'woocommerce_get_endpoint_url', 'custom_link_endpoint_url', 10, 4 );
function custom_link_endpoint_url( $url, $endpoint, $value, $permalink ) {
if ( $endpoint === 'custom-link' ) {
// Replace the URL with your desired link
$url = 'https://asaddas.com/';
}
return $url;
}

Complete Code For Add Custom Tab To Woocommere My Account Load inside the my account page

you can replace custom-tab in all over the code with your slug, no space just use dash or underscore. also can change Your Custom Tab Name with your desired name.

Pro Tip: Save Permalinks Once After Code Added.

// 1. Add custom link to WooCommerce My Account menu
add_filter( 'woocommerce_account_menu_items', 'custom_add_my_account_link' );
function custom_add_my_account_link( $items ) {
    // Define the new tab key and title
    $new_item = array( 'custom-tab' => __( 'Your Custom Tab Name', 'woocommerce' ) );

    // Insert the new tab before the "Logout" item
    $items = array_slice( $items, 0, -1, true ) 
           + $new_item 
           + array_slice( $items, -1, 1, true );

    return $items;
}

// 2. Register new endpoint
add_action( 'init', 'custom_add_my_account_endpoint' );
function custom_add_my_account_endpoint() {
    add_rewrite_endpoint( 'custom-tab', EP_PAGES );
}
// 3. Display content for the custom tab
add_action( 'woocommerce_account_custom-tab_endpoint', 'custom_my_account_tab_content' );
function custom_my_account_tab_content() {
    echo 'Welcome to the Custom Tab';
    echo 'This is where you can add any custom content, such as special offers, custom user details, or embedded forms.';
}

// 4. Flush rewrite rules on plugin/theme activation (to avoid 404 issues)
register_activation_hook( __FILE__, 'custom_flush_rewrite_rules' );
function custom_flush_rewrite_rules() {
    custom_add_my_account_endpoint();
    flush_rewrite_rules();
}

// 5. Flush rewrite rules on deactivation
register_deactivation_hook( __FILE__, 'custom_flush_rewrite_rules_deactivate' );
function custom_flush_rewrite_rules_deactivate() {
    flush_rewrite_rules();
}

Let Us know About Your Experience With this Code in the Comments Area, We Provide More Woocommerce tutorials in our future articles