Back to contents

JetEngine: How to Show or Hide the Content by Date Using Dynamic Visibility

Find out how to show special offers or hide limited content on the WordPress website by date with the JetEngine Dynamic Visibility module.

JetEngine plugin allows you to set any specific conditions you need to show or hide the content. One of the main Dynamic Visibility module’s features is showing and hiding content by date. So, let’s find out how to implement this feature on the WordPress website.

Activating Dynamic Visibility

Firstly, go to the JetEngine > JetEngine and enable Dynamic Visibility for Widgets and Sections. Click the “Save” button.

Now Dynamic Visibility module will appear while editing.

dynamic visibility for widgets and sections toggle

Showing Content

Head to the Elementor-edited page to apply the Dynamic Visibility feature. As an example, we will move to the CPT Single Page.

Choose the section, column, or widget to which you want to apply the Dynamic Visibility module. Go to the Advanced tab, find Dynamic Visibility and toggle the Enable switcher.

Primarily, choose the Visibility condition type in the settings. Now we show the element according to the set conditions.

visibility condition type

Open the selector and define the Condition. As an example, we select the “Greater than” option.

greater than condition

Press the “Dynamic Tags” button in the Field and select between the presented options. This time we will work with the JetEngine “Custom Field.”

dynamic tags button

As we are planning to show content based on the custom field, initially create the Date or Datetime meta field. 

To do so, proceed to the JetEngine > Post Types and click on the “Edit” button that appears next to the post type title.

custom post types list edit button

Once the editor is opened, scroll down to the Meta Fields tab and push the “Add New” button. Fill in all the needed fields accordingly and enable the Save as timestamp option.

Push the “Update Post Type” button.

jetengine post type date field settings

Open the post type, and proceed to the post editing. Fill in the date field and click on the “Update” button. Repeat this process with other posts.

date field in the custom post

Return to the Single Page editor. Select the Date/Datetime field you have just created.

custom date field in conditions

Click on the “Dynamic Tags button next to the Value field.

value dynamic tags button

Choose the JetEngine “Macros” dynamic tag and define the “Today” option as a Value.

date macros value

Leave Context by default and pick the “Numeric” option in the Data Type field.

context and data type

Once the Dynamic Visibility is adjusted, click on the “Update” button and check the custom post type posts.

The first option date is upcoming, so we see the banner.

upcoming event on the front end

The second option is the event that has already ended, and the banner isn’t displayed here.

finished event on the front end

This way, you can also hide some content; let’s check the example.

Hiding Content

We will create a Datetime meta field this time. However, you can also build a Date meta field if desired.

Go to JetEngine > Post Types and open the post type, which posts you would like to hide.

Scroll down to the Meta Fields tab and add a new meta field. 

Fill in the Label and move to Name/ID that should contain only Latin letters in lower case, numbers, “-” and “_” characters. Leave a “Field” Object type and select “Datetime” as a Field type. Don’t forget to enable Save as timestamp option.

Press the “Update Post Type” button.

jetengine post type datetime field settings

Then proceed to the custom post type posts and set the Datetime values for every post you need.

Click the “Done” button every time you want to save the Datetime field changes and “Update” one to save the post.

datetime field in the custom post

Let’s assume you want to display events in the listing. To do so, proceed to JetEngine > Listings.

Add new or open the already created listing.

jetengine listings

Add all the needed widgets. For instance, we have added Dynamic Image and Dynamic Field. As for the hiding element, we use the Heading.

We adjust all the needed Content and Style settings and move to the Advanced section. 

Click the Dynamic Visibility tab and toggle Enable Dynamic Visibility to set the conditions. 

enable dynamic visibility toggle

Pick the “Hide element if condition met” option as the Visibility condition type and “Less than” as a Condition.

Push the Dynamic Tags icon to select the “Custom Field” option.

dynamic tags for the field

Open the newly appeared Field drop-down and select the Datetime meta field you have created earlier.

custom field settings

Click the Dynamic Tags button in the Value field and choose the “Macros” option. Among all the provided macros, pick “Today.”

today macros for hiding element

Leave Context as “Default” and choose “Numeric” in the Data type drop-down list.

context and data type for hiding element

Push the “Update” button and open the page where you want to place the listing.

To place the listing, use the Listing Grid widget.

listing grid with hiding elements in elementor

Once ready, you can click on the “Publish/Update” button and check the front-end result.

listing grid with hiding elements on the front end

That’s it. Now you know how to show and hide the needed content by the date on the WordPress website with JetEngine Dynamic Visibility.