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 Field | ACF Field Value |
| Country (key: country, Type: text) | India ( Fallback: N/A) |
Secondly, you may want to hide the container completely because the empty content is now breaking the design or making it dull.
| ACF Field | ACF 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 free to use and 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
- Install & Activate the Dynamic.ooo Plugin
- Click on the Element (Section, Column or Widget that you want to hide)
- Navigate to Visibility Tab
- Enable Visibility Option, set display mode to yes & set the “Post/Page” Trigger
- Now go to Post/Page Tab and set the ACF field in Post Field.
- Choose the option that says “valorized with any value”
- Now update the page and the condition will work.
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 Conditions 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.
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.
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. 😀