---
title: "How to Set Elementor Display Condition Based on Date & Time?"
url: https://theplusaddons.com/docs/set-elementor-display-condition-based-on-date-time/
date: 2023-06-23
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "When it comes to creating a dynamic and engaging digital experience, it is essential to control what your visitors see and when they see it. Display conditions based on date..."
image: https://theplusaddons.com/wp-content/uploads/2023/06/How-to-Set-Elementor-Display-Condition-Based-on-Date-_-Time_-1024x536.jpg
word_count: 1529
---

# How to Set Elementor Display Condition Based on Date & Time?

## 

- The Plus Addons for Elementor Pro incluye Display Condition, y la extensión aparece en la pestaña Advanced de cualquier widget, sección o contenedor de Elementor.
- Current Date permite mostrar contenido dentro de un intervalo concreto, como una promoción navideña del 25th Dec al 1st Jan.
- Time of Day usa la zona horaria del sitio y puede ocultar un mensaje después de las 23:59 con el ajuste Before.
- Day of Week permite elegir días específicos, como Friday, y admite varios días juntos para menús semanales o descuentos recurrentes.
- Time Range muestra contenido solo entre Start Time y End Time, pero no admite rangos nocturnos como 22:00 a 02:00; el post indica usar dos reglas en su lugar.

When it comes to creating a dynamic and engaging digital experience, it is essential to control what your visitors see and when they see it. Display conditions based on date & time can be especially helpful when you want to show specific content to your visitors based on the current day, week, or time of the day.

When you are using Elementor to create your website, you can use the Display Condition extension of The Plus Addons for Elementor to set different types of display rules based on time and date.

*To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, [click here](/docs/display-conditions-settings-overview/).*

**Best Used For:**

- E-commerce stores scheduling seasonal promotions to appear automatically during a set date range

- Restaurant and hospitality websites displaying day-specific menus or recurring weekly specials

- Service businesses running time-limited offers with automatic visibility cutoffs each day

***Requirement  - This extension is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/display-conditions/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Display Condition is part of The Plus Addons for Elementor Pro. It does not exist in the free plugin.- **Switch it on.** It is off by default. Go to **The Plus Addons > Extensions** and turn on **Display Condition**.- **Where it appears:** the **Advanced** tab of any Elementor widget, section or container — not only The Plus Addons widgets.

> ***The editor always shows everything.** Conditions are applied only on the published page, so check the result in a private window — logged out if the rule is about login status.*

To add visibility conditions based on date and time using the Display Condition extension, add any Elementor widget on the page. 

1. Go to **Advanced** > **Display Condition**.

2. Turn on the **Display Condition** toggle.

Now you will see **Keep HTML**, which is on by default. While it is on, an element whose conditions are not met is still sent to the browser and hidden with CSS, so its content can be read in the page source. Turn it **off** for anything private — members-only details, prices for logged-in customers — so the element is not sent at all.

3. After selecting the appropriate option from the **Display When** dropdown, go to the **Rules** section. Here you have to set the actual display condition. You can have one or multiple conditions/rules.

4. To set a date and time based display rule, click on the **Rule** tab. Here you will find different options under the **Date and Time** label.

> **Note:** None of these use the visitor's timezone. **Time of Day** and **Time Range** use your site timezone from **Settings > General**. **Current Date** and **Day of Week** are checked against UTC in the current version, so on a site outside UTC they change over at midnight UTC, not your local midnight.

## How to Set Elementor Display Condition Based on Current Date?

This option allows you to set display conditions on your content for a specific date range. Use this when you want to show special content related to a sale or offer for a fixed number of days, such as a holiday promotion banner or a limited-time announcement on a WooCommerce store.

To set display condition for a date range - 

1. Select **Current Date** from the first dropdown under the **Rule** tab.

2. Then in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the **In Interval** field, you will have to set the date range.

For example, if you want to show a discount offer message related to the Christmas sale, then after selecting **Current Date** from the first dropdown, choose **Is** from the second dropdown. 

Then in the **In Interval** field, choose the date range for example, 25th Dec to 1st Jan.

That will make the message visible from 25th Dec to 1st Jan.

If you want to go beyond date-based rules and show different content based on who is viewing the page, [How to Add Dynamic Content in Elementor?](https://theplusaddons.com/docs/add-dynamic-content-in-elementor/) covers conditions based on user roles, login status, and other dynamic parameters.

## How to Set Elementor Display Condition Based on Time of Day?

This option allows you to show or hide content after a specific time of the day. Use this when you display a time-sensitive offer on your website and want to hide it after a certain hour automatically, such as a same-day delivery cutoff or a happy hour promotion with a defined end time.

To set display conditions based on time of day - 

1. Select **Time of Day** from the first dropdown under the **Rule** tab.

2. Then in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the **Before** field, you will have to set the exact time until the display condition will work.

For example, if you want to hide a discount message after 11:59 pm, then after selecting **Time of Day** from the first dropdown, choose **Is** from the second dropdown.

Then in the **Before** field, set the time to 23:59.

This will show the message until that time and will be hidden automatically.

If the option is set to **Not** in the second dropdown then this message will show after 23:59.

## How to Set Elementor Display Condition Based on Day of Week?

With this option, you can show content on specific days of the week. Use this when you want to display certain content only on certain days of the week, like showing a recurring weekly menu, a Monday newsletter callout, or a Friday-only discount. This can save you from a lot of manual work.

To set display conditions for certain days of the week - 

1. Select **Day of Week** from the first dropdown under the **Rule** tab.

2. Then in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the **Before** field, select the days you want the display condition to work.

For example, we want to display a special menu every Friday on a restaurant website. To do this after selecting **Day of Week** from the first dropdown, choose **Is** from the second dropdown.

Then in the **Before** field, select **Friday** from the dropdown.

This will show the content automatically every Friday.

If the option is set to **Not** in the second dropdown then this message will not show on Friday.

> *Note: You can add multiple days together.*

## How to Set Display Condition Based on Time Period Range?

With this option, you can show or hide content for a specific time range of the day. Use this when you need to display a flash sale offer, a lunch-hour promotion, or any time-limited banner that should appear only during a defined window each day.

To set display conditions for specific time range - 

1. Select **Time Range** from the first dropdown under the **Rule** tab.

2. Then in the second dropdown, you have two options - 

**Is** - The rule passes when the condition is met.

**Not** - Reverses the rule: it passes when the condition is not met.

3. In the **Start Time** and **End Time** fields, set the start and end time, respectively.

For example, we want to show a flash sale offer for 2 hours only. To do this, after selecting **Time Range** from the first dropdown, choose **Is** from the second dropdown.

Then, in the **Start Time** field, select the start time and set the time 2 hours later in the **End Time** field.

This will show the content for 2 hours only.

Also, read [How to Set Elementor Display Condition Based on Browser/Site Language](https://theplusaddons.com/docs/set-elementor-display-condition-based-on-browser-site-language/).

## How Each Rule Decides

| Rule | Is means | Clock |
| ---- | -------- | ----- |
| Current Date | Today is inside the interval, both ends included | UTC |
| Time of Day | It is **before** the time in the Before field | Site timezone |
| Day of Week | Today is one of the selected days | UTC |
| Time Range | Now is after Start Time and before End Time | Site timezone |

![A Time of Day rule set to Is, Before 18:00](https://theplusaddons.com/wp-content/uploads/2026/09/heading-tp-rule-time-value-wide-time.webp)

![A Current Date rule with an interval from 27 to 30 November](https://theplusaddons.com/wp-content/uploads/2026/09/heading-tp-rule-date-value-wide-date.webp)

> *The **Day of Week** field is labelled Before* in the current version. It is a list of days, not a time.

## Limitations

- **No overnight ranges.** A Time Range from 22:00 to 02:00 never matches; use two rules with **Any one Rule is True** instead — Time of Day Not before 22:00, and Time of Day Is before 02:00.- **Whole days, UTC.** Date and weekday rules can switch hours early or late on sites outside UTC.- **Page caching can delay the switch.** Clear the cache at the start and end, or exclude the page from caching.- **Pro only.** Display Condition is not in the free plugin.

## Troubleshooting

### It switches at the wrong hour

For Current Date and Day of Week, that is UTC. For Time of Day and Time Range, check the timezone in Settings > General.

### It shows in the editor but not on the site

The editor ignores conditions. Check the published page in a private window.