[Resolved] Dynamic “Login/My Account” shortcut in the secondary menu

[Alec]

Hello,

I would like to make it possible to have my Login link/button in the nav. menu to change dynamically, when a user/ Woo customer logs in, then it changes to “My Account” with maybe dropdown options like My Downloads / Log out. Probably a general thing. Something similar to GP or GB sites or to brothers Johnson sites Novashare or Perfmatters .

I (almost) achieved it by using the snippet in my child theme’s functions.php file. I’ve made the Login link appear in the secondary menu on product pages, product archives & categories using David’s hook from his Dispatch site). See it on my site here .

As yo can see, if the user/customer is not logged in the Shop page shows “My Account” linkl in the main nav. menu in the and “➤Log in” in the secondary menu at the same time.
But when the user logges in, the link “My Account” disappears in the main menu but the Secondary menu still shows “➤Log in”. It links to the “My account” page.

It is confusing and also adds an unnecessary link in the main menu.

Here is the code I use:

/*Log-in Log-out + slideout in secondary menu*/
add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
   if ($args->theme_location == 'secondary' || $args->theme_location == 'slideout') {
   $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">➤ Log in </a></li>
</li>';
   }
   elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
   $items .= '<li><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">My Account</a </li>';
   }
   return $items;
}

I suppose the solution would be simple, I just don’t have enough coding knowledge and skills 🙁
I also would not like to use one of those login-logout plugins, especially since I have achieved nice results with the code and the hook.

Thanks in advance.

[Elvin]

Hi there,

on your code snippet’s elseif, the condition points to the primary menu which is your main menu.

The condition !is_user_logged_in() && $args->theme_location == 'primary' basically tells your site that if a user isn’t logged, add a menu item with a label “My Account” on it.

There’s no instruction there to change the menu item you added on the secondary menu.

Now if you want to change the menu item on the secondary menu AND not add a menu item on your primary menu, we need to change the elseif condition.

Example:

/*Log-in Log-out + slideout in secondary menu*/
add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
   if (!is_user_logged_in() && $args->theme_location == 'secondary' || $args->theme_location == 'slideout') {
   $items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">➤ Log in </a></li>
</li>';
   }
   elseif (is_user_logged_in() && $args->theme_location == 'secondary' || $args->theme_location == 'slideout') {
   $items .= '<li><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">My Account</a </li>';
   }
   return $items;
}

This code basically targets only the secondary menu or the slideout/offcanvas menu.

The if() statement adds the “Login” item on the specified menu locations if the current user isn’t logged in (!is_user_logged_in()).

The elseif statement adds a “My account” item on the specified menu locations if the current user is logged in (is_user_logged_in()).

!is_user_logged_in() means NOT logged in. is_user_logged_in() means logged in. 😀

[Alec]

Thank you, Elvin for your detailed explanation!
This worked perfectly.

Obviously, I haven’t notice the “primary” in the condition for elseif.

The only thing, the “Log in” link stays in the mobile menu to off canvas. If we want to remove/hide it from there, what would be the best way to do it?

Should I add some CSS or maybe there some rule can be added in the functions.php?

[Elvin]

The only thing, the “Log in” link stays in the mobile menu to off canvas. If we want to remove/hide it from there, what would be the best way to do it?

Not sure I understand what you mean.

Do you want to completely remove the login/my account menu item on the offcanvas menu? If so, remove the || $args->theme_location == 'slideout' on both if() and elseif().

[Alec]

Yes, that’s what I meant. The main offcanvas slideout menu.

What do you think is the best practice? Should I leave it in the offcanvas for the main menu?

I want it to appear only in the secondary menu, on mobile as well.
So only when the user enters the Shop he/she will see the Login link in the sec. menu (hamburger)

[Elvin]

What do you think is the best practice? Should I leave it in the offcanvas for the main menu?

It’s really up to you.

But in my opinion, I think you should put the login/my account menu item on the primary menu instead of the secondary as the secondary seems to be for categories. I’ll keep it that way for the purpose of uniformity.

If there’s a size constrain, I’d consider making space for the login menu item by reducing the font sizes and/or padding between the menu items.

I’d also consider doing an A/B test on other layouts. I’d make a layout adding it as an icon instead of text menu item too just to see what looks better. You can add it as a widget icon along with the cart and search icon just to save space if you want. 😀

But this is all a matter of preference. 🙂

[Alec]

Than you so much for your help!

[Elvin]

No problem. Glad to be of any help. 😀

[Kaushik]

I want to add Dynamic “Login/My Account” Button After Search Bar. Any Suggestion How to Add?

[Elvin]

Hi @Kaushik,

If it’s after the search bar, you’ll have to create a Hook element hooked to generate_menu_bar_items.

Try adding this code in it.

<?php

function add_loginout_link() {
   if ( !is_user_logged_in() ) {
   $item = '<a class="my-account-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '"> ➤ Log in </a>';
   }
   elseif ( is_user_logged_in() ) {
   $item = '<a class="my-account-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '"> My Account </a>';
   }
   echo $item;
}

add_loginout_link();
?>

And make sure Execute PHP is checked for this to code run. 😀

[Kaushik]

Not Working Show Blank Screen

https://prnt.sc/25xsu19
https://prnt.sc/25xt2jp

[Elvin]

ah my bad. I forgot to mention you’ll have to change this line:

get_permalink( wc_get_page_id( 'myaccount' ) ) to the login page of your site. (this is example is for woocommerce) 😀

[Kaushik]

Sorry Asking I don’t have coding knowledge can you provide me proper code.

wordpress-661445-2360908.cloudwaysapps.com

[David]

Hi there,

did you resolve the issue ? As i can see the Login menu item and it works on the URL you provided

[Author]

Posts