Do you have a website where users log in to access content? You probably use a membership plugin to protect specific pages for certain membership levels, but what about specific elements on a page that can technically be accessed by users who are logged in or not? It's as simple as one little snippet of CSS!

We're using Thrive Themes (Theme Builder and Thrive Architect) for this tutorial because it allows us to give a CSS class to any specific element we want, however this tutorial is not unique to Thrive Themes.

Show Something in WordPress to Logged-In Users Only

In WordPress you can show content to logged-in users only by adding a simple two-part snippet of CSS. This CSS includes a class for the element you want to hide, and another class telling that element to be visible if the user is logged in to your website.

This CSS is default to WordPress, so the only thing you need to do is add the class to the element you want to show/hide, and then add the entire CSS snippet to your WordPress them customizer.

CSS to Copy:

.hiddenelement {

.logged-in .hiddenelement {
display: block;

The part highlighted in yellow is what you can customize and name whatever you wish. You can give this a name specific to the element you're hiding (in my video I call it the "accountnav") or you can use a widely-applicable term like "hiddenelement" so that you can easily remember and re-use it.

Copy the code above into the customizer, apply the class to your element, and you're all set! The element with the class "hiddenelement" will only be shown to users who are logged in to your website.

The benefits of using this method:

  • No plugins required
  • No membership platform
  • Can be applied to specific elements on a page
  • Can be used on elements that are on a page users can access if logged in or not

Ideas for Implementation

  • Show buttons or content only to logged in users on the WooCommerce my-account page
  • Show discount codes only to logged in users for to encourage registration / loyalty
  • Promote products on your site only to logged-in users

If you have any questions about implementing this little tip, feel free to reach out and I'll be happy to assist. 

  • Hi,
    Is there a way to hide an element (or container) when a user is logged in?
    e.g. On a home page I have a container with elements that prompt a person to register or login. When they are logged in I don’t want to show that.
    Basically what you are doing but backwards?

    • If I’m understanding you correctly, then yes. The key is the login prompt. You can use the Thrive login element and if you put the right css properties on the right containers, this is doable.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    Join Convology Pro

    Get access to all Convology Courses, Workshops, and exclusive community with our all-access-pass called Convology Pro.