Display Logic

Display Logic settings allow to define conditions for displaying content on your website. Those settings are available for all theme elements in both Live Builder and WPBakery.

2721.png

2735.png

Conditions Matching Logic #

You can use one or multiple conditions to define if the element should be visible or not. To set up a matching condition, pick the relevant option in the Display this Element dropdown: 

  • Always - default option, the element is always visible. 
  • If EVERY condition below is met - the element will be visible if all conditions you specify are met at the same time
  • If ANY condition below is met - the element will be visible if at least one condition you specify is met. 

Once you pick the condition matching logic, you can start adding conditions by clicking the Add button: 

Conditions #

Date / Time #

This condition allows setting up a time when the element should start or stop showing.

The Date/Time condition uses the local time, which takes into account the Timezone value specified on the Settings > General admin page.

Use one of the following parameters:

  • Since - set a specific date and time
  • Until - set a specific date and time
  • Day of the week - select a day between Monday-Sunday (e.g. allows to show/hide an element on weekends only)
  • Day of the month - select a day between 1-31 (e.g. allows to show an element on the first day of every month)
  • Day of the year - set a day and a month (e.g. allows to show an element on a holiday, like a day before Christmas)
  • Month - select a month between January and December (e.g. allows to show/hide an element only in winter)

You can use the Date/time condition several times to implement complex logic.

Custom Field #

This condition allows showing the element based on the custom field value specified for:

  • the current website page (works for any post type and any taxonomy term archive page)
  • the relevant list item of Grid, Product List, Term List elements (works in their Grid Layout elements)

For a "Field Name" field use the slug, not the title. Multiple values are not supported, but you can add several "Custom Field" conditions if needed.

The "value" field supports dynamic values via {{custom_field_name}} shorthand.

Page URL #

This condition allows showing the element based on the page URL address. You can Include or Exclude a part of the URL or the absolute one.

Post Type #

This condition allows showing the element based on the WordPress post type. You can Include or Exclude a certain post type by using the relevant switch and dropdown list:  

To include or exclude multiple post types, you can use this condition multiple times with the relevant "Display this Element" matching logic. 

Post ID #

This condition allows showing the element based on the current WordPress post ID. You can specify a single value or multiple comma-separated values to Include or Exclude multiple IDs: 

You can find the post ID in the URL while editing the relevant post, in the `?post=<number>` URL parameter.

Taxonomy Term #

This condition allows showing the element based on the specified taxonomy and its value(s). This condition works for both post and term pages.

You can Include or Exclude term values by specifying the slugs or IDs. To specify multiple values, fill them in comma-separated. 

You can find relevant slugs to specify as values by opening the relevant taxonomy.

2736.png

User Role #

This condition allows showing the element based on the WordPress user role of the site visitor. You can Include or Exclude a certain role by picking it from the dropdown list. 

To include or exclude several roles, you can add this condition several times with the relevant "Display this Element" matching logic. 

User State #

This condition allows showing the element based on whether the visitor is logged in or not. Just pick the relevant switch position. 

User Custom Field #

This condition allows showing the element based on the custom field value specified for the current user disregarding the current website page.

For a "Field Name" field use the slug, not the title. Multiple values are not supported, but you can add several "User Custom Field" conditions if needed.

The "value" field supports dynamic values via {{custom_field_name}} shorthand.

Cart State #

This condition is WooCommerce-related, it allows showing the element based on the Cart state for the current visitor. Pick the relevant switch to define if the cart should be empty or not.

Cart Total #

This condition is WooCommerce-related, it allows showing the element based on the total cost of products inside the Cart for the current visitor. Pick the relevant switch to define if the cost should be less or greater than your custom value.

Also, this condition supports dynamic values via {{custom_field_name}} shorthand:

Account Endpoints #

This condition is WooCommerce-related, it allows showing the element based on the My Account subpage/endpoint. The URL for each endpoint can be customized in WooCommerce > Settings > Advanced. Learn more about WooCommerce endpoints.

Usage Examples #

Showing an element for several days #

  • Display this Element: if EVERY condition below is met
  • Date/Time > Since > Mar 10
  • Date/Time > Until > Mar 14

Showing an element for posts and pages #

  • Display this Element: if ANY condition below is met
  • Post type includes posts
  • Post type includes pages

Showing an element if the custom field has ANY value #

  • Display this Element: if EVERY condition below is met.
  • Custom field "Has a value".

Showing an element on a specific page #

  • Display this Element: if EVERY condition below is met.
  • Page URL includes <page URL slug>

Showing an element based on the ACF Date / Time field #

Date only:

  • Create the ACF Date field and set its "Return Format" as Ymd
  • Use the {{today}} shorthand for comparison

Time only:

  • Create the ACF Time field and set its "Return Format" as His
  • Use the {{now}} shorthand for comparison

Date and Time:

  • Create the ACF Date and Time field and set its "Return Format" as YmdHis
  • Use the {{today_now}} shorthand for comparison

The example in the screenshot will show the element if its date is today or earlier: