Dynamic Visibility Overview

The module is one of the JetEngine’s modules: JetEngine > JetEngine > Modules. The Dynamic Visibility for Widgets and Sections toggle activates this module.

The Dynamic Visibility tab is located in the Advanced section of any Elementor’s widget: Advanced > Dynamic Visibility. The Enable toggle activates it.

Now you can change visibility parameters for this element. However, if you want to customize visibility for another element, you’ll have to enable the module for it separately.

Visibility condition type

This drop-down menu has only two options:

• Show element if condition met – the chosen element will be visible if the conditions you choose are satisfied;
• Hide element if condition met – the element will be hidden if conditions are fulfilled.

Let’s assume you choose the Show element if condition met option.

Selection of Conditions

The Conditions drop-down menu lists different groups of conditions. Users can add one or some conditions to every element. They cover different options; therefore, some of them can have minor differences.The “Add Item” button adds a new Condition. You can also duplicate any of the added Conditions by hitting a duplicate button (the one with a doubled paper sheet icon).

General Conditions

The General Conditions includes Query Has Items and Query Has Not Items options. If chosen, they turn on the Query to check drop-down menu to select a query with or without the necessary items accordingly;

• Equal, Not Equal, Greater than, Greater or Equal, Less than, and Less or Equal options, if chosen, turn on the Field, Value fields, and Context drop-down menu.
  • the Field allows typing a field name or choosing the meta-fields from the drop-down menu by pressing the “Dynamic Tags” button. For the last case, you can select a meta-field developed by the JetEngine plugin or associated plugins, i.e., JetReviews.

The JetEngine meta fields have the following functionality:

• Custom Image, Custom Field, and JetEngine Gallery are fields that users can add to a meta box or custom post type. When choosing Custom Image, you select the Media field type, JetEngine Gallery ― the Gallery meta field type, and Custom Field for all other meta field types. The Meta Field Types Overview tutorial explains the available field types.
• Term Field and Term Image fields allow adding terms and images, respectively.
• Option, Image from options, and Gallery from options are fields created in the Options Pages tab of the JetEngine menu. To learn more about them, read the Options Page tutorial.
• User Field and User Image are fields responsible for all the meta fields attached to the user accounts.
• Dynamic Function tag sets the dynamic ranges of numerical field values.
• Macros field specifies the macros to return the necessary fields. The tutorial Macros Guide explains the main features of the macros developed by JetEngine.

• Current Object Field dynamic tag returns data from SQL queries.
• Profile Page URL dynamic tags adds the link to the user profile to their single pages.
• Data Stores: Post Count, Data Stores:Store Count, Data Stores: Get Store dynamic tags add appropriate data from data stores. The tutorial Data Stores Module overviews the Data Store Module settings.

After you choose the Tag, you can customize it more precisely. Clicking the gear icon on the left side of the bar allows editing the drop-down menu.

• The Value field allows setting values or values lists (numbers, letters, words, even phrases) to compare data. 
• The Context drop-down menu has two options: Default and Current List object options to get value from a current post by default or the current listing item object.

Additionally, the Equal, Greater than, Greater or Equal, Less than, and Less or Equal options have the Data type drop-down menu: Chars (alphabetical comparison) – letters are compared according to the alphabetical order. In it, every letter has its sequence number (“b” has priority over “a,” for example); Numeric – numbers are compared according to their value; Datetime – date or time are compared according to their position in the timeline.

• In the list and Not in the list are dynamic tags for the Checkbox, Select, and Radio meta fields. The element will be shown or not if a user chooses from the list the value you type into the Value text area accordingly.
• Exists and Doesn’t exist conditions mean that the element will appear or not on the page only if the chosen meta field is filled or filled with data accordingly.
• Contains and Doesn’t contain conditions 一 the element will be shown or not only if the selected meta field contains or doesn’t contain the data you type into the Value text area accordingly.
• Between and Not Between conditions allow displaying elements with values between or not between two values accordingly.
• Regexp and Not Regexp conditions display or do not display elements if the element matches or does not match the regular expression value accordingly.
• Is mobile device condition allows displaying elements on mobile devices only.

JetEngine Specific conditions

• Is Profile Page conditions mean that the element will be displayed on the user’s profile page only.
• Switcher enabled / Switcher disabled. These two conditions are created especially for the Switcher meta fields. The element will be shown if the switcher in the mentioned Field is enabled or disabled;
• Value is checked / Value is not checked. The conditions for the specific JetEngine Checkbox meta fields. You can choose the Field and the Value. When the user ticks that value – the element will be shown.

User conditions

• User meta is. The element will be shown if the user has a specified value in the meta field. You can add custom meta fields to users via Meta Box;
• User has required field. Enter user fields that need to be checked into the Fields List textarea. It can be default WordPress fields (e.g., first_name, last_name, description, user_nicename) or custom meta fields added via Meta Box. The condition will be met if the user has the provided data in all the specified fields;
• User meta is equal to post meta (put post meta key into value). Shows the element if user and post metadata have the same values. Enter the post meta key into the Value field to compare its value with the user metadata;

• User Can Add Post. You can restrict some users from publishing certain post types in the Profile Builder maintenance window. This condition means that the element will be visible to users who have permission to publish this type of post. Proceed to this tutorial to learn how to limit user’s access with Profile Builder;
• User logged in. The element is shown only to authorized users;
• User not logged in. The element is shown only to non-authorized users;
• User role is. The element is shown only to the users who have a specific role assigned to them. To learn how to assign the role to a user, take a look at this WordPress tutorial;
• User role is not. The element is shown only to the users whose roles don’t match the ones you mention;
• User ID is. Only the users whose ID numbers you type into the User IDs field will see the element;
• User ID is not. The users whose IDs you will type into the User IDs field won’t see the element.

Posts conditions

• Post Status Is. The element will be shown only on pages with the specified status;
• Is post by current user. The element will be shown only on pages built by the current user. It can be used on the user Account page;

• Is post by queried user. The element will be shown only on pages built by the queried user. It can be used only on the Profile Builder pages and in the listing for users;
• Post ID is. With this condition chosen, the element will be shown only on the pages you mention in the Value area. You have to type in the page ID there (the number only). Every post or page has its unique ID number. To find it, open the post or page and look at its URL. The number after “post=” will be the post ID. If there’s more than one post, separate the values with commas (no additional spaces needed);
• Post ID is not. In this case, the element will be shown on all the pages except for the ones you mention in the Value area;
• Single Post Type is. For this condition, you have to type in the post type slug to the Value text area. The element will be shown only on the pages that are referred to that post type. To find the necessary slug, go to Dashboard > JetEngine > Post Types and look at the Post Type Slug column;
• Single Post Type is not. The element will be shown for all posts except posts of the post type with a slug you will type in the Value text area;
• Post Type Archive is. Shows element only on the post type archive with a slug you enter in the Value text area;
• Post Type Archive is not. The element is visible for all post type archives except the one with a slug entered in the Value text area;
• Taxonomy Archive is. Shows element only on the taxonomy archive, with a slug you enter in the Value text area;
• Taxonomy Archive is not. The element will be shown for all taxonomy archives except the one with a slug entered  in the Value text area;
• Is Search Results. Shows the element only on the Search Results Archive page. To learn how to create a custom archive for the search results, proceed to this tutorial;
• Is Not Search Results. Shows the element everywhere except the Search Results Archive page;
• Is Current Post Author. Displays the element only if the current user is the post author;
• Is Not Current Post Author. Displays the element if the current user is not the author of the post;
• Post Has Terms. Shows the element if a post has assigned terms;
• Post Hasn’t Terms. Shows the element if a post doesn’t have assigned terms;

Activation of hierarchical conditions for posts

The Is Parent Post, Is Not Parent Post, Is Child Post of, and Is Not Child Post of conditions are active if the WordPress Dashboard > JetEngine > Post Types > Hierarchical toggle is enabled.

This toggle additionally allows making post type hierarchical, setting parent and child posts. If enabled, the “Page Attributes” option from the Supports drop-down menu in the “Quick Edit” panel sets parent posts. You can go to the hierarchical post type and click “Quick Edit” of one the posts, select the Parent post, and press the “Update” button.

Date&Time conditions

• Time Period. The element will be shown only at specified time periods. Enter the preferred time into the Time From and Time To fields in the 24-hour format (For example, 23:00);
• Days of week. The element will be shown only at specified days of the week. Set the desired weekdays in the Days of Week selector.

Listings

These conditions can be applied to the elements in the Listing templates. For example, by setting the “Is even item” and “Is odd item” conditions, you can alternate different elements in the listing. Also, be aware that these conditions are applied only to the nearest listings and aren’t applicable from the nested listing to the parent and vice versa.

• Is even item. Shows the element if the Listing Item in the Listing Grid widget or block is even (second, fourth, etc.);
• Is odd item. Shows the element if the Listing Item in the Listing Grid widget or block is odd (first, third, etc.);
• Is N item. Shows the element if the Listing Item is N in a row. E.g., if you set the Number to “3,” the element will be shown if the Listing Item is third in a row. If you enable the Each N Number toggle, the element will be displayed for every third item.

Define the relation

The last feature to define is Relation and it has only two options:

• AND – Visibility condition type will work only if all the defined conditions are met;
• OR – Visibility condition type will work if any of the defined conditions are met.

The JetEngine plugin got updated, and now it allows applying Dynamic Visibility to the blocks of the WordPress default editor.

Select a block in Gutenberg. There will be an eye-shaped icon on the toolbar on top of the block.

Once you click on it, you will see a pop-up window with the Enable toggle.

Turn it on and proceed to set up the visibility conditions for the current block.

Set the visibility type and add the necessary conditions.

Once you’re done with the settings, close the conditions windows and update the page.