0

I am using the following code to hide a menu item when a customer is not logged and show it when a customer is logged in.

.hide-item-not-login{
display: none !important;
}

.logged-in .hide-item-not-login{
display: block !important;
}

I applied the class hide-item-not-login to my menu item and it works fine.

What I actually want is the opposite. I want the menu item to hide when user logs in and show up when the user (cutsomer in woocommerce) is not logged in.

What changes are suggested? Any help is highly appreciated.

1

Can't you change CSS rules?

.hide-item-not-login{
    display: block !important;
}

.logged-in .hide-item-not-login{
    display: none !important;
}

EDIT

To add login/logout menu item, you will need to add one more class to logout menu item. Let's say you added class .logout-link to logout menu item. Then you can add css like this.

.hide-item-not-login{
    display: block !important;
}

.logged-in .hide-item-not-login{
    display: none !important;
}

.logout-link{
    display: none !important;
}

.logged-in .logout-link{
    display: block !important;
}
  • Great! Glad I could help you on this. :) – Robert hue Sep 22 '14 at 8:27
  • So these are predefined classes in wordpress that will work almost everywhere, right? – Samarth Agarwal Sep 22 '14 at 8:28
  • Yes, WordPress adds many useful body and post classes so you can style your website without editing theme PHP files. For your example WordPress added a class in body logged-in if a user is logged in. You can check more body_classes here. codex.wordpress.org/Function_Reference/body_class – Robert hue Sep 22 '14 at 8:33
  • Ok. Thanks for all that info. Just one last query, what if I have a case where I want to hide a menu item say LOGIN and show another item say LOGOUT upon login and vice versa upon logout? How can I use these classes for both menu items? – Samarth Agarwal Sep 22 '14 at 11:07
  • See edits in above. – Robert hue Sep 22 '14 at 13:37
1

This can be done by having the display: none; only on the .logged-in selector. Like this...

.logged-in .hide-item-not-login {
    display: none;
}

You might want to change that .hide-item-not-login to a more accurate .hide-item-login or something to make it more clear for this changed use case. Though it makes no difference to the functionality of it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.