Elementor and ACF Conditional Elements

If you’ve ever tried to display content conditionally in Elementor without premium plugins, you know it’s not straightforward. But there’s a clever workaround using CSS selectors that can help you achieve this without extra costs. Here’s how I did it.

Step 1: Understanding the Problem

Elementor lets you create visually stunning websites, but sometimes you need specific content to display only when certain conditions are met. For example, you might want a notice to appear only if a particular widget is in place. In my case I was pulling in ACF content to a post template and there was no way of knowing if every ACF field had content. Without built-in tools for conditional logic, this seems impossible—but CSS can help.

Step 2: Assign Classes

For this method to work, you’ll need to assign classes to the parent and child elements:

1. Add a class like needs-child to the parent container.

2. Add a class like child-marker to the child element.

This structure will let us use CSS to check whether the parent has a child with the specified class.

Step 3: Add the CSS

Now, use this CSS code to control the parent container’s visibility:

.needs-child:not(:has(.child-marker)) {  
  display: none;  
}

Here’s what this does:

:has() checks if the parent (needs-child) contains the specified child (child-marker).

:not() ensures the rule applies when the parent doesn’t have the child.

The result? If the child element isn’t present, the parent container won’t show on the page.

Conclusion

While Elementor doesn’t include native conditional display options, a little creativity with CSS can go a long way. With the steps outlined above, you can create dynamic, conditional content on your site quickly and efficiently.

Have questions or need help implementing this? Drop a comment below!