---
title: "How to Set Elementor Display Condition Based on Dynamic Custom Fields (Acf, Jetengine, Metabox)?"
url: https://theplusaddons.com/docs/set-elementor-display-condition-based-on-dynamic-custom-fields/
date: 2023-06-23
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/06/How-to-Set-Elementor-Display-Condition-Based-on-Dynamic-Custom-Fields-Acf-Jetengine-Metabox_-1024x536.jpg
word_count: 2202
---

# How to Set Elementor Display Condition Based on Dynamic Custom Fields (Acf, Jetengine, Metabox)?

## 

- The Plus Addons for Elementor Pro includes Display Condition, and the extension is off by default until it is turned on in The Plus Addons > Extensions.
- Display Condition appears in the Advanced tab of any Elementor widget, section, or container, and the editor always shows everything while conditions apply only on the published page.
- ACF text fields, selection fields, button groups, boolean fields, date/time fields, post fields, and taxonomy fields all support display rules based on field values.
- Keep HTML stays on by default, so hidden elements are still sent to the browser and can be read in page source unless it is turned off for private content.
- ACF boolean and date/time rules use True or False and Before Date options, while ACF post and taxonomy rules can match specific post, page, custom post type, category, or tag values.

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](/docs/display-conditions-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, 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.*

**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 **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.

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”.

![ACF text field for Elementor display condition in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/06/acf-text-field.png)

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](https://theplusaddons.com/docs/create-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.

![ACF button group for Elementor display conditions in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/06/acf-button-group.png)

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.

![ACF boolean field for Elementor display condition in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/06/acf-boolean.png)

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.  

![ACF date time field for Elementor display condition in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/06/acf-date-time-new.png)

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](https://theplusaddons.com/docs/add-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.

![ACF taxonomy field for Elementor display condition in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/06/acf-taxonomy.png)

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](https://theplusaddons.com/docs/set-elementor-display-condition-based-on-shortcode/).

## Supported Plugins and Field Types

| Plugin | Field types in the rule list |
| ------ | ---------------------------- |
| ACF | Text fields, Selection, Button Group, Boolean, Date / Time, Post, Taxonomy |
| ACF Extended | Image Selector |
| JetEngine | Text, Text Area, Switcher, Checkbox, Radio, Select, Number |
| Toolset | Text, Number, Radio, Checkbox, Select, Checkboxes |
| PODS | Text, Date, Number, Boolean |

> *Each group appears in the rule list only while that plugin is active. There is no separate Meta Box group in the current version.*

## Limitations

- **Fields are read from the page being viewed.** Put the element in the single template of the post type that carries the field.- **Pro only.** Display Condition is not in the free plugin.

## Troubleshooting

### My field type is not in the list

Only the types above are supported. Check the plugin is active and the field is one of these types.

## Frequently Asked Questions

**Q: How do I hide an Elementor widget based on an ACF text field value?**
A: ACF text fields work well when the content needs to match a specific string, number, email, URL, password, or text area value. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH display conditions, the key detail is the field label and the exact value stored in ACF. Use Is to show only matching content, or Not to hide matching content and show everything else. That matters most for things like names or status labels where one character off changes the result.

**Q: Which custom field types are supported for display conditions in Elementor?**
A: The supported field types depend on the plugin that created them. For ACF, the rule list includes Text fields, Selection, Button Group, Boolean, Date / Time, Post, and Taxonomy. JetEngine supports Text, Text Area, Switcher, Checkbox, Radio, Select, and Number. Toolset supports Text, Number, Radio, Checkbox, Select, and Checkboxes. PODS supports Text, Date, Number, and Boolean. The Plus Addons for Elementor only shows each group while that plugin is active.

**Q: Why is my display condition not working in the Elementor editor?**
A: The editor always shows everything by design. Display conditions are applied only on the published page, so the editor is a bad place to judge whether a rule works. The practical test is to open the live page in a private window and check it logged out if the rule depends on login status. The Plus Addons for Elementor also has a Keep HTML option: when it is on, hidden content still reaches the browser and is just hidden with CSS.

**Q: Can I use display conditions with JetEngine or MetaBox custom fields?**
A: JetEngine is supported directly in the rule list with Text, Text Area, Switcher, Checkbox, Radio, Select, and Number field types. The page also says MetaBox can be used as a dynamic custom fields plugin in this workflow. One important limitation is that there is no separate Meta Box group in the current version. That means support is organized by the active plugin groups shown in the rule list rather than by every plugin name you might expect.

**Q: Should I use Keep HTML for private content like member-only prices?**
A: Keep HTML should be off for anything private because it controls whether hidden content still gets sent to the browser. When it is on by default, the element is still output and only hidden with CSS, which means its content can be read in page source. For member-only details or logged-in customer prices, turning it off keeps the element from being sent at all. That makes it the safer choice whenever visibility rules protect sensitive content.

**Q: What are the main limitations of Elementor display conditions based on custom fields?**
A: Two limitations matter most here: fields are read from the page being viewed, and Display Condition is part of The Plus Addons for Elementor Pro only. That means you should place the element in the single template for the post type that actually carries the field value. It also means this feature does not exist in the free plugin. For setup details across all rules there is a feature overview link at [/docs/display-conditions-settings-overview/]( /docs/display-conditions-settings-overview/ ).