In today’s digital age, content is king, and presenting that content in an optimised way is essential to a successful website. This can be especially true if you cater to a global or multiple language audience. To ensure your website is seen in the right language, it’s important to be able to set display conditions based on the browser/site language.
If you’re using Elementor to create your website, you can try the Display Condition extension of The Plus Addons for Elementor. With this, you can easily set different display conditions based on user’s browser or site language.
To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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 display conditions based on browser or site language, 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. Then click on the Rule tab. Here you’ll find different options under the Language label.
How to Set Elementor Display Condition Based on Site Language?
If you are using any multilingual plugin, you can use this option to show or hide specific content based on the different languages of the site. This can be useful to show special content tailored for a particular language.
To set display conditions for site language –
1. Select Site 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. From the last dropdown, select your language.
For example, we want to show a different banner image if the language is set to Italian.
To do this, select the widget, after selecting Site from the first dropdown, choose Is from the second dropdown.
Then in the last field, select Italiano.
If the option is set to Not in the second dropdown, it will reverse the condition.
How to Set Elementor Display Condition Based on Browser Language?
With this option, you can set display conditions on content based on the language set in the browser. This can be used to show content in different languages based on the user’s browser language settings.
To set display conditions for browser language –
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. From the last dropdown, select your language.
For example, if you have a multilingual website and want to display different content based on the visitor’s browser language, you can set the display condition to “Browser Language.” This means that visitors who have their browser language set to a specific language will see the corresponding content tailored to their language preference.
Also, read How to Set Elementor Display Condition Based on URL String or Parameters.
How Each Language Is Detected
| Rule | Reads | Matches |
|---|---|---|
| Site | The language WordPress is serving the page in | The exact locale, e.g. Italian (it_IT) |
| Browser | The visitor’s first preferred browser language | The language only, e.g. Italian — not the region |
Limitations
- Browser rules ignore regions. Portuguese in Portugal and in Brazil look the same.
- Only the first browser language counts. A visitor with English first and Italian second is treated as English.
- Pro only. Display Condition is not in the free plugin.
Troubleshooting
The Site rule does not change with my translation plugin
It follows the language WordPress reports for the page. Check your multilingual plugin sets the locale per language.
