in

How to Hide the Elements if ACF Field is Empty

How to Hide the Elements if ACF Field is Empty

When the ACF field is Empty you have only a few choices to play with Elementor page design.

Firstly, you will want to show a fallback text, for example, N/A or No content found!. This way you can avoid the use of visibility conditions and keep with the design by having a fallback content.

ACF FieldACF Field Value
Country (key: country, Type: text)India ( Fallback: N/A)

Secondly, you may want to completely hide the container because the empty content is now breaking the design or making it quite dull.

ACF FieldACF Field Value
Alternatives (key: repeater_alternatives, Type: repeater)No Alternatives (Better to hide the Section)

Here you can use the visibility condition. There are many ways obviously to use the Visibility conditions to hide the section, elements or columns. However, I personally like to use Dynamic.ooo Visibility which in my opinion is the best.

The reason is simple: It allows you to have many triggers such as Post/Page, User & Role, Terms and Archive, Device & Browser, Date & Time, WooCommerce, and whatnot. Furthermore, their Dynamic Visibility plugin is completely free to use and is available on the WordPress plugins repository. However, you can always have Dynamic.ooo plugin to use some additional features.

Steps to Hide the Element if ACF Field is Empty

How to Hide Element if ACF Field is Empty
  1. Install & Activate the Dynamic.ooo Plugin
  2. Click on the Element (Section, Column or Widget that you want to hide)
  3. Navigate to Visibility Tab
  4. Enable Visibility Option, set display mode to yes & set the “Post/Page” Trigger
  5. Now go to Post/Page Tab and set the ACF field in Post Field.
  6. Choose the option that says “valorized with any value”
  7. Now update the page and the condition will work.
How to Hide the Section when ACF is Empty

Now the Element on which you performed this visibility condition will be shown only when the ACF field will be vaporized with any value in settings.

How to Set Condition for More than One Meta

You might also be looking to hide the content when more than one meta fields are empty. In such a case, you set the meta in the Multiple Metas option which is the Post/Page trigger itself. Now you can set the Meta Conditions as AND. If you select OR, then it will be triggered if any of them are valorized.

Multiple ACF Field Hide Content

How to Set Condition Based on The Value of Meta

In the Post Field Field Status, you have more options where you can set the “Equal to” and match it with the Provided Field Value. Now the condition will trigger when ACF Field Value matches with the value you input here.

Hide Section based on Specific Value of ACF

For the above screenshot, the content will be shown only when the Email Meta value will be equal to “[email protected]

Over To You

So, this is how you can set the visibility condition based on the value of the ACF Fields using Dynamic Content for Elementor Plugin very easily. 😀

Leave a Reply

Your email address will not be published.