Hide the Content if ACF Field is Empty or not Valued

Do you want to hide the content if there is no value set in the ACF Field? If yes, then you have landed on the right tutorial. There are many cases when you want to hide the content, section, column, or any widget if the ACF Field is empty.

Use Cases

  • When you want to hide the testimonial section when no testimonials are set.
  • When you want to hide the section made for displaying video, while the video URL is not set in ACF.
Bonus Tip: Instead of hiding the content you can also display the fallback content such as N/A or No Content Found!
ACF Field Fallback Content when it is Empty

Steps Involved to Hide the Content if ACF FIeld is Empty

Using Custom Code

Basic Code: While displaying the field value you can check it with the If condition so that it executes if the value is set.

<?php if( get_field('field_name') ): ?>
	<p>My field value: <?php the_field('field_name'); ?></p>
<?php endif; ?>

In Loop: for the loop, you can first use get_field_objects(); to load the array. Now you can check the array and get it executed if it is set.

<?php 

$fields = get_field_objects();

<?php if( $fields ): ?>
	<ul>
	<?php foreach( $fields as $field ): ?>

		<?php if( $field['value'] ): ?>
			<li><?php echo $field['label']; ?>: <?php echo $field['value']; ?></li>
		<?php endif; ?>

	<?php endforeach; ?>
	</ul>
<?php endif; ?>

Using Dynamic.ooo Addon

You can use the Dynamic visibility plugin to achieve it as well. Which is way more convenient and offers more features and flexibilities.

How to Hide Element if ACF Field is Empty
  1. Make sure you have Installed & Activated the Dynamic.ooo Plugin
  2. Click on the Section, Column or Widget that you want to hide
  3. Go to the Visibility Tab
  4. Now Enable the Visibility Option, set display mode to yes & the enable the “Post/Page” Trigger from the dropdown
  5. Now go to Post/Page Trigger Tab and set the ACF field in the Post Field.
  6. Click the option that says “valorized with any value”
  7. Congratulations! You’ve set the display condtion. Now you can update the page and see the result.
How to Hide the Section when ACF is Empty

Setting Condition for Not Less than One Post Meta

There are chances when you are looking to hide the content when more than one meta fields are empty at the same time. In such a case, you can set the meta(s) in the Multiple Metas option which is present in the Post/Page trigger.

There are two ways to set the Meta Conditions: viz. AND or OR.

  • If you select AND then the condition will trigger when all of them are valorized.
  • On the other hand, If you select OR, then the condition will be triggered if any of them are valorized.
Multiple ACF Field Hide Content

Setting Condition Based on The Meta Value

In the Post Field Status, you have many options such as not set or empty, valorized, less than, greater than, contain, not contain, in the array, equal to, and not equal to. So, here you can set the “Equal to” and match it with the Provided Field Value. Now the visibility condition will work only when ACF Field Value matches with the value you have provided here.

Hide Sectioan based on Specific Value of ACF

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

Leave a Comment