Are you looking for ways to personalize your Elementor page experience? Setting display conditions based on URL string or parameters can be a great way to deliver tailored content for different visitors.
The Display Condition extension of The Plus Addons for Elementor allows you to set display conditions based on specific URL string or UTM parameters.
To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, click here.
Best Used For:
- WooCommerce stores that need to show different call-to-action elements in shared header or footer templates based on which page type the visitor is viewing
- Marketing campaigns using UTM parameters to show personalized offers or banners only to visitors arriving from specific email or ad campaigns
- Membership and SaaS landing pages that display different content blocks depending on which referral channel or campaign the visitor came from
Requirement – This extension is a part of The Plus Addons for Elementor. Make sure it is installed and activated to enjoy all its powers.
To add display conditions based on URL, add any Elementor widget to the page.
1. Go to Advanced > Display Condition.
2. Turn on the Display Condition toggle.
You will see an option called Keep HTML. Enabling this will hide the content in the frontend if the condition is false, but it will remain in the HTML (DOM). Use this when you need the element to stay in the page structure for layout reasons even when hidden.
3. From the Display When dropdown, select the appropriate option, then go to the Rules section. Here you set the actual display condition. You can add one or multiple conditions.
4. Click the Rule tab. Here you will find different options under the URL label.
How to Set Elementor Display Condition Based on URL String?
Show or hide content based on a specific URL string. Use this to dynamically display different call-to-action elements on pages whose URL contains a specific path segment.
Note: These display conditions should be applied to the content in common templates like Header, Footer or Sidebar.
To set display conditions for a URL string:
1. Select String from the first dropdown under the Rule tab.
2. From the second dropdown, choose one of the following options:
Is – The condition is true when the URL path contains the specified string.
Not – The condition is true when the URL path does not contain the specified string.
3. In the last field, enter the URL string value.
Note: Only add the string value (shop), not the entire path.
For example, to show a CTA button in the header of all product pages on a WooCommerce site, go to the header template and select the widget.
After selecting String from the first dropdown, choose Is from the second dropdown.
In the last field, enter product as the string value.
This will show the content in the header of all product pages. To schedule this content to appear only during a specific date range, see How to Set Elementor Display Condition Based on Date & Time.
If the option is set to Not in the second dropdown, the condition reverses and the content is hidden on all product pages.
How to Set Elementor Display Condition Based on URL Parameter?
UTM (Urchin Tracking Module) codes are text snippets added at the end of a URL to identify the traffic source for a visit. You can set display conditions based on different UTM parameters in the page URL. This is useful for showing personalized content to visitors arriving from different traffic sources, such as email campaigns, paid ads, or social media posts.
To set display conditions for a URL parameter:
1. Select Parameter from the first dropdown under the Rule tab.
2. From the second dropdown, choose one of the following options:
Is – The condition is true when the URL contains the specified parameter.
Not – The condition is true when the URL does not contain the specified parameter.
3. In the last field, enter the parameter value.
Note: Only add the parameter value (utm_source=email), not the entire path.
For example, to show a welcome message to visitors arriving from an email campaign with the UTM utm_source=email in the URL:
Select the widget, then choose Parameter from the first dropdown and Is from the second dropdown.
In the last field, enter utm_source=email.
This will show the content to all visitors who arrive via your UTM-tracked email link. To show content based on whether a visitor is logged in, see How to Set Elementor Display Condition Based on Visitor/Login Status.
If the option is set to Not in the second dropdown, the condition reverses and the content is hidden for all visitors who arrive via that UTM link.
Also, read How to Set Elementor Display Condition Based on Browser/Site Language.
