Add a Custom menu item with a custom link in WooCommerce My Account Section

Question

I am adding successfully a new custom tab to WooCommerce My account section. But I'm not able to change the menu item link, it stays tied to the 'my-account' URL.

I want to remove the http://site-test.local/my-account
from this absolute link "http://site-test.local/my-account/https:/mycustomwebsite.com/"

I just want to have "https:/mycustomwebsite.com/" when I do click on the "NEW CUSTOM TAB" menu link.

Here is the code I added to my theme functions.php file:

function custom_add_my_account_menu_item($items) {
    // Add a new menu item with the key 'custom_option'
    $items['https://mycustomwebsite.com'] = __('NEW CUSTOM TAB', 'your-text-domain');

    $cleanLink = str_replace('http://site-test.local/my-account', '', $items); //I'm trying to remove the site-test.local/my-account, but it doesn't work
    
    $items = $cleanLink;
    
    return $items;
}

add_filter('woocommerce_account_menu_items', 'custom_add_my_account_menu_item');

// Display content for the custom option in the My Account section
function custom_my_account_endpoint_content() {
    echo '<p>This is the content for the custom option.</p>';
}

add_action('woocommerce_account_custom_option_endpoint', 'custom_my_account_endpoint_content');   

How to change the menu item link to a custom link?

Answer 1

To set a custom link to a custom My Account menu item, you can use the following instead:

// Add a custom menu item
add_filter('woocommerce_account_menu_items', 'add_my_account_custom_menu_item');
function add_my_account_custom_menu_item( $menu_items ) {
    $menu_item_key = 'custom_link';
    $menu_items[$menu_item_key] = __('Custom Link', 'woocommerce');

    return $menu_items;
}
   
// Replace the custom menu item Link
add_action('template_redirect', 'change_my_account_custom_menu_item_link', 10);
function change_my_account_custom_menu_item_link() {
    if ( is_user_logged_in() && is_account_page() ) {
        $menu_item_key = 'custom_link'; // HERE set the custom menu item key you are using
        $custom_link   = esc_url('https://mycustomwebsite.com/'); // HERE set your custom link
        // jQuery code
        wc_enqueue_js("$('li.woocommerce-MyAccount-navigation-link--{$menu_item_key} a').attr('href','{$custom_link}');");
    }
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

---

If you want to open the link in a new window, replace the last function with:

// Replace the custom menu item Link
add_action('template_redirect', 'change_my_account_custom_menu_item_link', 10);
function change_my_account_custom_menu_item_link() {
    if ( is_user_logged_in() && is_account_page() ) {
        $menu_item_key = 'custom_link'; // HERE set the custom menu item key you are using
        $custom_link   = esc_url('https://mycustomwebsite.com/'); // HERE set your custom link
        // jQuery code
        wc_enqueue_js("$('li.woocommerce-MyAccount-navigation-link--{$menu_item_key} a').attr('href','{$custom_link}').attr('target','_blank');");
    }
}

Note that with a custom menu item link, the related tab content will never get displayed.