phpjquerywordpresswoocommerceaccount

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


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?


Solution

  • 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.