---
title: "How to Set Elementor Display Condition Based on Visitor/ Login Status?"
url: https://theplusaddons.com/docs/set-elementor-display-condition-based-on-login-status/
date: 2023-06-23
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "If you’re looking to get more out of Elementor, one of the most popular page builders available today, then setting display conditions based on visitor status can be a great..."
image: https://theplusaddons.com/wp-content/uploads/2023/06/How-to-Set-Elementor-Display-Condition-Based-on-Visitor-Login-Status-1024x536.jpg
word_count: 1544
---

# How to Set Elementor Display Condition Based on Visitor/ Login Status?

## 

- The Plus Addons for Elementor Pro incluye la extensión Display Condition, que se activa en The Plus Addons > Extensions y aparece en la pestaña Advanced de cualquier widget, sección o contenedor de Elementor.
- Display Condition permite mostrar contenido según Login Status, User Role, Operating System, Browser y Location, con reglas que usan Is o Not en el menú Rule.
- Keep HTML está activado por defecto y deja el elemento en el código fuente; al desactivarlo, el contenido privado no se envía al navegador.
- Login Status distingue entre Logged In y Logged out, mientras que User Role solo coincide con visitantes conectados y puede apuntar a roles como Administrator.
- Location usa el país detectado por la IP del visitante mediante un servicio de terceros elegido en la regla, y Chrome también coincide con Edge, Brave y otros navegadores basados en Chromium.

If you’re looking to get more out of Elementor, one of the most popular page builders available today, then setting display conditions based on visitor status can be a great way to do that. With the Display Condition extension of The Plus Addons for Elementor, you can set display conditions based on whether a visitor is logged in or not, has a certain role, or is viewing the page from a specific location, and more. This allows you to customise your website experience for each user.

*To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, [click here](/docs/display-conditions-settings-overview/).*

***Requirement  - This extension is a part of The Plus Addons for Elementor. Make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/display-conditions/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Display Condition is part of The Plus Addons for Elementor Pro. It does not exist in the free plugin.- **Switch it on.** It is off by default. Go to **The Plus Addons > Extensions** and turn on **Display Condition**.- **Where it appears:** the **Advanced** tab of any Elementor widget, section or container — not only The Plus Addons widgets.

> ***The editor always shows everything.** Conditions are applied only on the published page, so check the result in a private window — logged out if the rule is about login status.*

To add visibility conditions based on the user's different status using the Display Condition extension, add any Elementor widget on the page. 

1. Go to **Advanced** > **Display Condition**. 

2. Turn on the **Display Condition** toggle.

Now you will see **Keep HTML**, which is on by default. While it is on, an element whose conditions are not met is still sent to the browser and hidden with CSS, so its content can be read in the page source. Turn it **off** for anything private — members-only details, prices for logged-in customers — so the element is not sent at all.

3. After selecting the appropriate option from the **Display When** dropdown, go to the **Rules** section. Here you have to set the actual display condition. You can have one or multiple conditions/rules.

4. To set the user-based display rules, click on the **Rule** tab. Here you’ll find different options under the **Visitor** label.

## How to Set Elementor Display Condition Based on User Login Status?

With this option, you can show different content to logged-in users and logged-out users. This can be a very useful feature if you are running a membership site where users have to register to access certain content.

To set visibility rules based on a user's login status - 

1. Select **Login Status** from the first dropdown under the **Rule** tab.

2. Then in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the last dropdown, you’ll have to choose **Logged In**. 

For example, if you want to show content to logged-in users only, then after selecting **Login Status** from the first dropdown, choose **Is** from the second dropdown.

This will make the content visible to logged-in users only. 

If you choose **Not** from the dropdown, then it will be visible to logged-out users only.

## How to Set Elementor Display Condition Based on Different User Roles?

This will allow you to show or hide content based on the user's role. This is very useful if you allow user registration on your WordPress website, so that you can show or hide content to different users based on their roles.

[Understand different roles in WordPress](https://wordpress.org/documentation/article/roles-and-capabilities/).

> *Note: This rule applies only to logged in visitors.*

To set display conditions based on the user role. 

1. Select **User Role** from the first dropdown under the **Rule** tab.

2. Then in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the last dropdown, you’ll have to choose the appropriate user role.

For example, if you want to show a piece of content only to the administrator role users, then after selecting **User Role** from the first dropdown, choose **Is** from the second dropdown.

Then from the last dropdown, select **Administrator**.

This will make the content visible to the users with the administrator role only.

If you choose **Not** from the second dropdown, then it will be hidden from administrator users.

Similarly, you can set rules for other user roles.

## How to Set Elementor Display Condition Based on Operating System?

With this option, you can set the display condition of a widget based on the user's operating system. This can be used if you offer something specific, like software/app for different operating systems. You can show content accordingly to the visitors based on their operating system.

To set display conditions based on operating systems. 

1. Select **Operating System** from the first dropdown under the **Rule** tab.

2. Then in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the last dropdown, you’ll have to choose the targeted operating system.

For example, if you want to show a button for the Android version app to the Windows users, then after selecting **Operating System** from the first dropdown, choose **Is** from the second dropdown.

Then from the last dropdown, select **Windows**.

Now, visitors using the Windows operating system can only see the button.

If the second dropdown is set to **Not,** then the button will not be visible to Windows operating system users.

Following this process, you can also set display conditions for other operating systems.

## How to Set Elementor Display Condition Based on Visitor Browser?

You can set display conditions for content based on the visitor's browser. This condition can be used if you offer something browser-specific, like addons or in-browser apps, then you can show content to the users based on their browser.

To set display conditions based on a browser. 

1. Select **Browser** from the first dropdown under the **Rule** tab.

2. Then, in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the last dropdown, you’ll have to choose the targeted browser.

For example, we have an addon for both Mozilla Firefox and Chrome browsers. Now we want to show different buttons on both browsers for their respective download options. 

For this, select a button; after selecting **Browser** from the first dropdown, choose **Is** from the second dropdown.

Then from the last dropdown, select **Chrome**.

Now that button will be visible to Chrome users only.

Following this process, you can also set conditions for the Mozilla Firefox browser.

## How to Set Elementor Display Condition Based on Geo Location of Visitor?

You can show different content based on the location of a user. This can be a great way to show customised content or an offer based on the visitor's location.

To set display conditions based on the visitor's location - 

1. Select **Location** from the first dropdown under the **Rule** tab.

2. Then in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the next dropdown, you’ll have to choose the targeted country.

4. Then, from the last dropdown, you have to select the appropriate API.

For example, we want to show a customised message for all the visitors coming from the United States. To do this, after selecting **Location** from the first dropdown, choose **Is** from the second dropdown.

Then, from the next dropdown, select **United States**.

After that, select the appropriate API from the last dropdown.

This will make that content visible to visitors coming from the United States only.

If you choose **Not** from the second dropdown, then the content won’t be visible to visitors from the United States.

Following this process, you can also set display conditions for other countries.

Also, read [How to Set Elementor Display Condition Based on Date & Time](https://theplusaddons.com/docs/set-elementor-display-condition-based-on-date-time/).

## Things to Know About Visitor Rules

- **Private content needs Keep HTML off.** With it on, a members-only element is still in the page source for logged-out visitors.- **User Role only matches logged-in users.**- **Browser matching is loose.** Chrome also matches Edge, Brave and other browsers built on Chromium. Modern Opera is not detected as Opera.- **Location is by country,** looked up from the visitor's IP address through a third-party service you choose in the rule. That sends the visitor's IP to that service — mention it in your privacy policy.- **Page caching.** Logged-in visitors usually bypass the cache; logged-out visitors may all get the same cached page, which matters for browser, device and location rules.

## Troubleshooting

### Logged-out visitors can still see the members' content in the source

Turn off **Keep HTML**.

### It looks right in the editor but not on the site

The editor ignores conditions, and you are logged in there. Check in a private window.

## Frequently Asked Questions

**Q: How do I hide Elementor content from logged-out visitors without exposing it in the page source?**
A: Turn off Keep HTML. With Keep HTML on, the element is still sent to the browser and hidden with CSS, so logged-out visitors can still read it in the page source. That matters for members-only details or logged-in customer prices. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this setting inside the Display Condition extension, so private content should not rely on CSS hiding alone.

**Q: What is the best way to show different Elementor content to logged-in and logged-out users?**
A: Use the Login Status rule under Visitor and set it to Logged In or Not. Logged In shows the element only to signed-in users, while Not flips the rule for logged-out visitors. This is useful for membership sites where access changes by authentication state. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH applies this in the Advanced tab of any Elementor widget, section, or container.

**Q: Can I show different Elementor content based on user role?**
A: User Role rules are built for that, but they only match logged-in visitors. That makes them useful when you want administrators to see one message and other roles to see something else. Pick User Role, then choose Is or Not, then select the role such as Administrator. A practical gotcha is that role-based visibility will not help with anonymous traffic because the rule only applies after login.

**Q: Does Elementor display condition work by browser or operating system?**
A: The Display Condition extension can target both Operating System and Browser under Visitor rules. That makes it useful for browser-specific downloads or OS-specific app buttons. One detail to watch is that browser matching is loose: Chrome also matches Edge, Brave, and other Chromium-based browsers, and modern Opera is not detected as Opera. That means browser rules are broader than many people expect.

**Q: How does geo location targeting work in Elementor display conditions?**
A: Location rules are country-based and use the visitor’s IP address through a third-party service you choose in the rule. You pick a country such as United States, then choose an API from the last dropdown. This is good for country-specific offers or messages, but it also means the visitor’s IP is sent to that service, so it should be mentioned in your privacy policy.

**Q: Why does my Elementor display condition look right in the editor but not on the live site?**
A: The editor ignores conditions and always shows everything because you are logged in there. Conditions are applied only on the published page, so a private window is the right place to test login-based rules. Page caching can also affect what logged-out visitors see, since they may all get the same cached page while logged-in visitors usually bypass cache. That difference matters most for browser, device, and location rules.