Friday, March 1, 2024

How to Hide Section If ACF Custom Field is Empty in WordPress

Hide Elementor Element or Section If ACF field is Empty

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

Required Plugins:

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

Visibility Settings to Hide Section if ACF Field is Empty
  • Make sure you've installed Dynamic.ooo plugin on your website
  • Click to Edit your section
  • Go to the Visibility tab
  • Enable Visibility for Show toggle
  • Enable the “Post” visibility trigger
Hide Content if Custom Field is Empty
  • Go to Post Visibility settings > Post Field and choose the 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 the “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.

Using A True/False Field to Hide the Content

As an alternative, you can also create a new custom field of type True/False

True False Custom Field to Show:hide Content

This field returns 1 if true and 0 if false. In the Post Field, select your true/false field and set the status to “Equal To” and compare it with the value “0” or “1” based on what you have selected in display mode.

Visibility Based on Post Field Value

Based on the display mode set to hide, if the true/false field is equal to “0”, the container or section for which the visibility is set would be hidden.

Leave a Reply

Your email address will not be published. Required fields are marked *

I agree to the Terms & Conditions and Privacy Policy.

Related Posts

Stay tuned with us

Table of Contents

Welcome Back!

Login to your account below

Retrieve your password

Please enter your username or email address to reset your password.

Add New Playlist

DroidCrunch Giveaway

Amazon Gift Card worth $15

Participate now and get a chance to become a lucky winner to receive the reward.​