Displaying content conditionally based on dynamic custom fields gives you precise control over what each visitor sees on your site. Plugins like ACF, JetEngine, MetaBox, and Toolset let you attach custom fields to posts, products, and custom post types, and the Display Condition extension in The Plus Addons for Elementor reads those field values to show or hide any Elementor widget.
The Display Condition extension of The Plus Addons for Elementor lets you set display conditions based on different custom fields.
To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, click here.
Requirement – This extension is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.
Best Used For:
- Membership sites that need to show premium content only when an ACF boolean field marks a post as paid or members-only
- WooCommerce stores displaying product-specific sections based on ACF selection fields like product type or availability status
- Marketing sites personalizing page content for different visitor segments using JetEngine or MetaBox custom fields
For ease of understanding, we are using the free Advanced Custom Fields (ACF) plugin here, but if you are using some other dynamic custom fields plugins like JetEngine, MetaBox, or Toolset you will get relevant display condition options.
To add display conditions based on custom fields of Advanced Custom Fields, add any Elementor widget on the page.
1. Go to Advanced > Display Condition.
2. Turn on the Display Condition toggle.
Now 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 page structure to stay intact for JavaScript or CSS targeting even when the widget is not visible.
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.
4. Then click on the Rule tab. Here you will find different options under the Advanced Custom Fields label.
How to Set Elementor Display Condition Based on ACF Text Fields?
With this option, you can show or hide content based on the values of different ACF text fields such as text, number, range, email, URL, password, and text area.
Suppose we have created a custom field group called Additional Information for our posts. Here we have a Text field called Name with the value “Sam”.
Now to set the display condition based on the value of that text field, from the Elementor editor select the widget on the page.
1. Choose ACF : Text Fields from the first dropdown under the Rule tab.
2. Then in the second dropdown, add the field label.
3. Then in the third dropdown, you have two options –
Is – The condition evaluates as true. Use this to show the widget only when the custom field value matches your target.
Not – The condition evaluates as false. Use this to hide the widget when the custom field value matches, and show it to all other visitors.
4. In the last field, add the same text field value that you have entered in the ACF field.
Depending on your choice in the third field (Is or Not), your content will be visible or hidden.
Following this process, you can set display conditions based on the values of other ACF text fields.
The Plus Addons for Elementor also integrates ACF gallery fields directly in the Elementor editor. See How to Create an Elementor Gallery with ACF Gallery to display images stored in ACF gallery fields on your pages.
How to Set Elementor Display Condition Based on ACF Selection?
With this option, you can set display conditions based on the values of different ACF selection fields such as select, radio button, and checkbox.
Taking the example above, we have added a Status select field in the Additional Information and we have set the value as “Editor”.
Now to set the display condition based on the value of that select field, from the Elementor editor, select the widget on the page.
1. Choose ACF : Selection from the first dropdown under the Rule tab.
2. Then in the second dropdown, add the field label.
3. Then in the third dropdown, you have two options –
Is – The condition evaluates as true. Use this to show the widget only when the custom field value matches your target.
Not – The condition evaluates as false. Use this to hide the widget when the custom field value matches, and show it to all other visitors.
4. In the last field, add the same field value that you have entered in the ACF field.
Note: You can add multiple values here this is ideal for Checkbox field.
Depending on your choice in the third field (Is or Not), your content will be visible or hidden.
Following this process, you can set display conditions based on the values of other ACF selection fields.
How to Set Elementor Display Condition Based on ACF Button Group?
This option lets you set display conditions based on the values of ACF buttons.
Continuing our example, we have added a Profile section in the Additional Information with two buttons, Show and Hide. We have selected the Show button here.
Now to set the display condition based on the value of that button, from the Elementor editor, select the widget on the page.
1. Choose ACF : Button Group from the first dropdown under the Rule tab.
2. Then in the second dropdown, add the field label.
3. Then in the third dropdown, you have two options –
Is – The condition evaluates as true. Use this to show the widget only when the button value matches your target.
Not – The condition evaluates as false. Use this to hide the widget when the button value matches, and show it to all other visitors.
4. In the last field, add the button value.
Note: You can add multiple values as well.
Depending on your choice in the third field (Is or Not) your content will be visible or hidden.
How to Set Elementor Display Condition Based on ACF Boolean?
This option lets you set display conditions based on the ACF boolean value. A boolean field can only have a True or False value.
Continuing our example above, we have added a boolean field named Paid to mark the status of the post.
Now to set the display condition based on the boolean value, from the Elementor editor, select the widget on the page.
1. Choose ACF : Boolean from the first dropdown under the Rule tab.
2. Then in the second dropdown, add the field label.
3. Then in the third dropdown, you have two options –
Is – The condition evaluates as true. Use this when the boolean field is set to True and you want the widget to appear on the page.
Not – The condition evaluates as false. Use this when you want the widget to appear only when the boolean field is set to False.
4. In the last dropdown, select True or False as per your requirement.
Depending on your choice in the third field (Is or Not) your content will be visible or hidden.
How to Set Elementor Display Condition Based on ACF Date / Time?
With this option, you can set display conditions on content based on a specific date and time using the ACF Date fields.
In our example, we have added a section called Date in the Additional Information and selected a specific date and time.
Now to set a display condition based on that date value, from the Elementor editor, select the widget on the page
1. Choose ACF : Date / Time from the first dropdown under the Rule tab.
2. Then in the second dropdown, add the field label.
3. Then in the third dropdown, you have two options –
Is – The condition evaluates as true. Use this to show the widget when the date field matches your target date.
Not – The condition evaluates as false. Use this to hide the widget when the date matches, and show it on all other dates.
4. In the Before Date field, choose an earlier date and time from what you have set in the ACF field.
Note: Depending on the ACF settings you can work with date only as well.
How to Set Elementor Display Condition Based on ACF Post?
With this option, you can set display conditions on the content of different posts, pages, or custom post types (depending on ACF settings) based on the ACF post, such as Post Object and Relationship.
Note: Depending on the ACF settings, the display conditions should be applied to the content in the relevant template or common templates like Header, Footer, Sidebar etc.
In the example, we have added a section called Post Name in the Additional Information and added a post named Elementor.
Now to set the display condition based on the post value, from the Elementor editor, select the widget on the page.
1. Choose ACF : Post from the first dropdown under the Rule tab.
2. Then in the second dropdown, add the field label.
3. Then in the third dropdown, you have two options –
Is – The condition evaluates as true. Use this to show the widget only when the post field matches a specific post, page, or custom post type.
Not – The condition evaluates as false. Use this to hide the widget when the post field matches, and show it in all other cases.
4. In the last field, select the post, page, or custom post type name that you have added in the ACF field.
Note: You can add multiple post name.
Depending on your choice in the third field (Is or Not), your content will be visible or hidden.
Following this process, you can set display conditions based on the values of other ACF post fields.
If you build post listing pages and want visitors to filter content by category on the same site, see How to Add a Category Wise Filter in Blog Post in Elementor for the category filter widget in The Plus Addons for Elementor.
How to Set Elementor Display Condition Based on ACF Taxonomy?
With this option, you can set display conditions based on different taxonomies like category, tag, and custom post type taxonomy using the ACF taxonomy field.
Note: Depending on the ACF settings, the display conditions should be applied to the content in the relevant template or common templates like Header, Footer, Sidebar etc.
In the example, we have added a section called Category in the Additional Information and selected the Clothing post category.
Now to set display condition based on the selected taxonomy, from the Elementor editor, select the widget on the page.
1. Choose ACF : Taxonomy from the first dropdown under the Rule tab.
2. Then in the second dropdown, add the field label.
3. Then in the third dropdown, you have two options –
Is – The condition evaluates as true. Use this to show the widget when the taxonomy term matches your target category or tag.
Not – The condition evaluates as false. Use this to hide the widget when the taxonomy term matches, and show it for all other terms.
4. In the last field, select the term name that you have added in the ACF field.
Note: You can add multiple terms.
Note: If left blank, it will be applied to all terms.
Depending on your choice in the third field (Is or Not), your content will be visible or hidden.
Also, read How to Set Elementor Display Condition Based on Shortcode.
