How to Hide/Show a Widget Based on User Status (Logged In/Logged Out) in Elementor (without Add-on)

Updated: October 24, 2022

Alright, this article might be helpful if you want to hide/show widget/s on your website based on user status to give exclusivity to your user who logged in or subscribed to your website. Some websites require users to log in to access a contained part or the whole website.

Maybe you are wondering, “Is it possible to hide or show widget/s based on user status in Elementor?” Well, everything is possible in Elementor. The combination of WordPress and Elementor, you can hide and show your widgets seamlessly.

Steps to Hide/Show Widget based on User Status (Logged In or Logged Out) in Elementor (without Add-on)

Step 1: Add the Code Snippet to the functions.php File

Here, we will add the simple PHP snippet into the functions.php file to hide or show widgets based on user status.

Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can use the Code Snippets plugin to add a custom function in WordPress. Read here to learn more.

On your WordPress dashboard, go to Appearance -> Theme File Editor.

Once enter the Theme File editor page, select the functions.php and paste the code snippet below:

Note: Paste the code snippet at the end of the functions file content.

// Add CSS class for logged in and logged out users
add_filter('body_class','er_logged_in_filter');
function er_logged_in_filter($classes) {
if( is_user_logged_in() ) {
$classes[] = 'logged-in-condition';
} else {
$classes[] = 'logged-out-condition';
}
// return the $classes array
return $classes;
}

Once you’ve added the code snippet, update the theme file by clicking the Update File button.

Step 2: Add the CSS Snippet

Next, we will add the CSS snippet to the WordPress Customizer CSS editor. On your WordPress Dashboard, navigate to Appearance -> Customize.

Once you enter the customization settings, go to Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.

/* Logged in & out conditions */
.logged-in-condition .hide-logged-in {
	display: none!important;
}
.logged-out-condition .hide-logged-out {
	display: none!important;
} 

Once you’ve added the CSS snippet, apply it by clicking the Publish button.

Step 3: Add the Elementor CSS Classes

Go to your Elementor editor; you can create new content or select the existing one. Prepare the widget/s that you want to hide/show based on user status.

You can see from the image above we have three widgets that we want to hide and show to users based on their status.

  1. Subscribe Now: Hide for logged-in users.
    • It means when the user is logged in to the website, this widget will not appear (hidden).
  2. Start Course: Hide for logged-out users
    • This widget will appear only for users logged in to the website.
  3. Buy Only this Course $12.00: Hide for logged-in users.
    • It means when the user is logged in to the website, this widget will not appear (hidden).

Next, we want to add the CSS Class for each widget. The name of CSS Classes depends on whether you want the widgets will appear or not appear (based on user status).

Select any widgets you want to hide or show; on the widget settings panel, navigate to the Advanced tab -> Layout -> CSS Classes.

CSS Class to Hide Widgets for Logged-out Users

Type hide-logged-out if you want your widget to show only for logged-in users.

CSS Class to Hide Widgets for Logged-in Users

Type hide-logged-in if you want your widget to hide when the user is logged in.

That’s it. Don’t forget to save or publish your project. To see how it works, go to your site and open it on a new window. Please log out from your WordPress site if you want to test whether the widgets already hide when the user is logged out.

The Results

  • User Status: Logged In
  • User Status: Logged Out

The Bottom Line

This article shows how easily you can hide and show the widgets based on user status (logged in/logged out) in Elementor without the help of any add-ons. But if you want a more straightforward way, we recommend you use the help of some Elementor’s add-ons. Such as Happy Addons, Essential Addons and JetEngine. Using the help of Elementor add-ons to show/hide widgets based on users’ status is easier because you don’t need to add any code.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.