In many cases, we tend to need custom conditions where we can hide an element or a complete section if the ACF field is empty or not set. For example, we have a single post template with coupons that are coming from ACF fields. However, in the post backend, we haven’t set the coupons. As such, you will either need to hide the heading in your template file for coupons. Or you will need to hide the complete section for coupons in your template file. Isn’t it? So, in this post, we will see how to hide your section if there is no value in your ACF custom field.
- Elementor: Get Elementor Pro
- Dynamic Content for Elementor: Get Dynamic.ooo here | Check review
- Advanced Custom Fields Plugin
Steps to Hide Section or Element If ACF Custom Field is Empty:
For example, we need to hide the complete section if the ACF field is not set or empty
- Make sure you’ve installed Dynamic.ooo on your website
- Click to Edit your section
- Go to Visibility tab
- Enable Visibility for Show toggle
- Enable “Post” visibility trigger
- Go to Post Visibility settings > Post Field and choose your Meta key for which you want to show/hide the section
- As you choose the meta key, you will be able to see more options under Post Field Status
- Choose “Valorised with any value” option under Post Field Status
- Now Update the Template
- Congratulations! You’ve successfully hidden the section where the ACF Field is not set.
With the aforementioned video(in the featured video), you can also see the live example of how to hide the section whenever your ACF field is not valorized with any value in the backend.