How To Conditionally Show Or Hide Divi Modules Based On Custom Field Values Tutorial by Pee Aye Creative

How To Conditionally Show Or Hide Divi Modules Based On Custom Field Values

In this tutorial I will show you how to use an exciting new Divi feature to conditionally show or hide modules based on custom field values!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Enable Custom Fields In Divi

The first step before we can begin using this exciting new feature in Divi is to enable custom fields. Perhaps you already have custom fields set up, that is great! You can skip ahead. I do not want this particular tutorial to become a lesson on using custom fields. If you want a dedicated tutorial on that, you can let me know in the comments. In this tutorial, I’ll quickly explain two types of custom fields.

Built-In Custom Fields

WordPress comes with built-in custom fields by default. However, these are disabled by default, so you may not even know about them! They are also a bit limited in comparison to some plugins like ACF, but they certain work great for basic needs. You can enable these in four basic steps from any page or post.

  1. In the top right corner, click the three dots menu.
  2. Click on “Preferences” at the bottom of the panel.
  3. A popup will appear. Click on “Panels” in the tabs on the left.
  4. Enable the toggle for “Custom Fields.”
how to enable custom fields in Divi

Awesome! Now the custom fields panel will appear below the content editor area on the page like this:

custom fields panel on a Divi page or post

Note that turning this setting on once on any page will enable it on all pages and posts across your site, which is great.

Custom Fields Plugin

If you need a more robust system of custom fields, you will need to install a custom field plugin. Some popular ones include Advanced Custom Fields, Pods, Meta Box, and many more. In my video accompanying this tutorial I show you some examples using ACF, but it really doesn’t matter what method you use. 

popular custom field plugins for Divi

Exploring The New Custom Field Display Conditions In Divi

As I mentioned, the Divi 4.14.3 update brought several new Display Condition features (I also have a feeling more are coming). One of those caught my eye, the one called Custom Field. Why? Because it’s the #1 feature that we all expected in the Display Conditions, and was oddly missing. So it’s a big deal!

The new Custom Field option is easy to locate as soon as you click to add a new condition. In any section, row, or module, click on the Advanced tab and open the Conditions toggle. Next, click the plus icon to “Add Condition.”

add new Divi Display Condition

A new panel will appear with lots of choices. We discussed some of these in our original tutorial overview of the new Divi Display Conditions feature. For this tutorial, select the “Custom Field” option.

choosing custom field from the Divi Display Conditions

Now you will see the panel appear to narrow down your selection of the specific custom field and value that you are wanting to use.

1. Select Custom Field Name

The first dropdown is on “Manual Custom Field Name” by default. Below that is an input field for you to enter the name. What you do here will depend on if you are suing the default custom fields or not. If you are using the built-in WordPress custom fields, I recommend selecting the actual custom field name in that first dropdown (this way you do not need to type it, and you will be more confident that it is properly selected.) If you use Advanced Custom Fields, for example, you need to get the field name and write/paste that in the input field.

The options that appear in the list when you select the first dropdown is going to be totally different for everyone, depending on what custom fields you have set up. Once you make your selection, you can proceed to choosing the condition.

Divi Display Conditions custom field display only if settings

2. Select Condition

The condition dropdown is set to “Is” by default. But you can certainly change that to whatever fits your situation. Take a look at the available options:

  • Is
  • Is Not
  • Contains
  • Does Not Contain
  • Is Any Value
  • Has No Value
  • Is Greater Than
  • Is Less Than
Divi Display Conditions custom field options

A very common use case would be “Is Any Value” and I explain this more in the video. Basically an example would be if I have a Button module with the URL linked to the custom field with dynamic content, I would only want the button to display if there is actually a link. So I would select “Is Any Value” meaning this button will only show if there is a link present to be clickable.

Notice if I select this option then it does not even need to show the last dropdown (which was for selecting the value) because we chose generically if there is a value or not.

Divi Display Conditions custom field option has any value

3. Select Custom Field Value

Depending on your choice of condition in step 2, this option will not appear and you can skip this.

If this option is showing, you will need to select the custom field value. This is similar to the name, with a default “Manual Custom Field Value” option and an input field. But unlike the name, for this I do recommend using the input field.

Conclusion & Use Cases

There’s not much else to say, other than to go play around with this for yourself! I’m sure you will find even more ways to use than what I in the video. Be sure to watch that for several real-world use cases on our new family website: Miller Family Adventure.

Tell Us A Creative Use Case!

Let me know in the comments what use cases you are building with this new feature! I know there are a lot of creative ideas out there!

8

Last updated Dec 20, 2021 @ 8:35 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. Ray Gulick

    This does seem pretty powerful, but I can’t figure out how to make custom post type ‘Events’ drop off the list when they are ‘past events’. I’m a fairly experienced developer, but new to Divi.

    I have a custom field, ‘event_enddate’ (Ymd), which I need to compare to ‘today’s date’. With what you’ve explained here I see how to make ‘event_enddate’ part of the equation, but there does not seem to be a way to add today’s date to compare it to: event_enddate is more than today’s date.

    Reply
      • Ray Gulick

        So, is your recommendation that I create a listing template with a custom WP_query, and not use Divi on that page?

        Which, of course, means I’d need to duplicate the header and footer outside of Divi for that page as well?

      • Nelson Lee Miller (aka The Divi Teacher)

        I don’t really have a recommendation, as I don’t have experience with what you are trying to do comparing the dates. You would need to write some jQuery instead of using the Divi Conditions.

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart