All Collections
Divi Documentation
FAQ's
How to show or hide modules using Display Condition and Custom Fields
How to show or hide modules using Display Condition and Custom Fields

Using Display Condition, we can show/hide module depending on the value of a custom field.

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Our recommended WordPress plugin for creating Custom Fields is the Advanced Custom Fields plugin.

Using custom fields, we can hide/show Sections/Rows and Modules using Divi's Display Condition feature.

Setup

  1. Install and activate the Advanced Custom Fields plugin.

  2. Create your first custom field.

Creating the first custom field

  1. Go to the ACF option in the WordPress dashboard and click on Field Groups:

    Open the ACF Field Groups

  2. Click on Add new button (at the top):

    Add a new ACF Fields Group

  3. Give the Group a name - it can be anything you want.

    Name the ACF Field Group

  4. Add at least one field by choosing the Field Type and setting the Field's Label:

    Create a Text ACF field

    Note: In the above example, I chose to use the text field type, and the field's label is My Custom Field. The ACF plugin will automatically fill in the Field name value - so you don't have to worry about that.

  5. Decide on which post type (Page, Post, Product, Project) the custom field should be used.

    Set the show rules for the ACF Field Group

  6. Click on the Save Changes button (top right corner).

    Save the ACF settings

Using the ACF Field in Divi's Display Condition option

Once at least one field is created, we can use it inside Divi's Display Condition to determine whether a Section/Row/Module should appear based on the Custom Field's value.

The Field Group was set to show on Page in the following example. First, we must create a new page or edit an existing one.

The ACF field will be displayed at the bottom while creating a new page or editing an existing page.

Add values to the custom field
  1. Set the value of the ACF Field

  2. Enable the Visual Builder

  3. Edit the element (Section/Row/Module) for which the Display Condition should be used

  4. Go to the Advanced Tab and open the Display Condition option group

  5. Click on the plus icon to add a new condition

  6. Choose Custom Field

    Choose the Custom Field option

  7. Select the custom field name

    Select the ACF field

  8. Set the Display Condition

    Set Display Condition

If the condition is true, the element (section/row/module) to which the Display condition will be applied will show.

If the condition is false, the element (section/row/module) to which the Display condition is being set will not show.

We also have a great video that explains in detail how to create/set up and use a custom field with Divi's Display Conditions, you can see it here -> https://vid.divi.tech/xzzVsC25.

Did this answer your question?