{"id":120357,"date":"2023-06-23T10:57:46","date_gmt":"2023-06-23T05:27:46","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=120357"},"modified":"2023-06-26T16:27:24","modified_gmt":"2023-06-26T10:57:24","slug":"set-elementor-display-condition-based-on-date-time","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/set-elementor-display-condition-based-on-date-time\/","title":{"rendered":"How to Set Elementor Display Condition Based on Date &amp; Time?"},"content":{"rendered":"\n<p>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 &amp; 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, <a href=\"\/docs\/display-conditions-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This extension is a part of The Plus Addons for Elementor, make sure it&#8217;s installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/plus-extras\/display-rules?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To add visibility conditions based on date and time using the Display Condition extension, add any Elementor widget on the page.&nbsp;<\/p>\n\n\n\n<p>1. Go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Display Condition<\/strong>.&nbsp;<\/p>\n\n\n\n<p>2. Turn on the <strong>Display Condition<\/strong> toggle.<\/p>\n\n\n\n<p>Now you\u2019ll see an option called <strong>Keep HTML<\/strong>. Enabling this will hide the content in the frontend if the condition is false but it will remain in the HTML (DOM).<\/p>\n\n\n\n<p>3. After selecting the appropriate option from the <strong>Display When<\/strong> dropdown, go to the <strong>Rules<\/strong> section, here you have to set the actual display condition. You can have one or multiple conditions\/rules.<\/p>\n\n\n\n<p>4. To set a date and time based display rule, click on the <strong>Rule<\/strong> tab. Here you\u2019ll find different options under the <strong>Date and Time <\/strong>label.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Elementor Display Condition Based on Current Date?<\/h2>\n\n\n\n<p>This option allows you to set display conditions on your content for a specific date range. This can be very useful if you show special content related to a sale or offer for a certain number of days.<\/p>\n\n\n\n<p>To set display condition for a date range &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Current Date<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"334\" height=\"1046\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-current-date.gif\" alt=\"display condition current date\" class=\"wp-image-120361\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the <strong>In Interval<\/strong> field, you\u2019ll have to set the date range.<\/p>\n\n\n\n<p>For example, if you want to show a discount offer message related to the Christmas sale, then after selecting <strong>Current Date<\/strong> from the first dropdown, choose <strong>Is<\/strong> from the second dropdown.&nbsp;<\/p>\n\n\n\n<p>Then in the <strong>In Interval<\/strong> field, choose the date range for example, 25th Dec to 1st Jan.<\/p>\n\n\n\n<p>That will make the message visible from 25th Dec to 1st Jan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Elementor Display Condition Based on Time of Day?<\/h2>\n\n\n\n<p>This option allows you to show or hide content after a specific time of the day. This can be used if you display some limited time offer on your website and want to hide it after a certain time automatically.<\/p>\n\n\n\n<p>To set display conditions based on time of day &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Time of Day<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"344\" height=\"1048\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-time-of-day.gif\" alt=\"display condition time of day\" class=\"wp-image-120360\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the <strong>Before<\/strong> field, you\u2019ll have to set the exact time till the display condition will work.<\/p>\n\n\n\n<p>For example, if you want to hide a discount message after 11:59 pm, then after selecting <strong>Time of Day<\/strong> from the first dropdown, choose <strong>Is<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>Then in the Before field, set the time exactly to 23:59 pm.<\/p>\n\n\n\n<p>This will show the message until that time and will be hidden automatically.<\/p>\n\n\n\n<p>If the option is set to <strong>Not<\/strong> in the second dropdown then this message will show after 23:59 pm.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Elementor Display Condition Based on Day of Week?<\/h2>\n\n\n\n<p>With this option, you can show content on specific days of the week. This can be handy if you want to show certain contents only on certain days of the week, like showing different food menus on different days of the week. This can save you from a lot of manual work.<\/p>\n\n\n\n<p>To set display conditions for certain days of the week &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Day of Week<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"269\" height=\"1033\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-day-of-week.gif\" alt=\"display condition day of week\" class=\"wp-image-120358\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the <strong>Before<\/strong> field, select the days you want the display condition to work.<\/p>\n\n\n\n<p>For example, we want to display a special menu every Friday on a restaurant website. To do this after selecting <strong>Day of Week<\/strong> from the first dropdown, choose <strong>Is<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>Then in the <strong>Before<\/strong> field, select Friday from the dropdown.<\/p>\n\n\n\n<p>This will show the content automatically every Friday.<\/p>\n\n\n\n<p>If the option is set to <strong>Not<\/strong> in the second dropdown then this message will not show on Friday.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can add multiple days together.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Display Condition Based on Time Period Range?<\/h2>\n\n\n\n<p>With this option, you can show or hide content for a specific time range of the day. This can be used to show a flash sale offer or something similar.<\/p>\n\n\n\n<p>To set display conditions for specific time range &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Time Range<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"362\" height=\"1047\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-time-range.gif\" alt=\"display condition time range\" class=\"wp-image-120359\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the <strong>Start Time<\/strong> and <strong>End Time <\/strong>fields, set the start and end time, respectively.<\/p>\n\n\n\n<p>For example, we want to show a flash sale offer for 2 hours only. To do this, after selecting <strong>Time Range<\/strong> from the first dropdown, choose <strong>Is<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>Then, in the Start Time field, select the start time and set the time 2 hours later in the End Time field.<\/p>\n\n\n\n<p>This will show the content for just 2 hrs.<\/p>\n\n\n\n<p>Also, read <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/set-elementor-display-condition-based-on-browser-site-language\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Set Elementor Display Condition Based on Browser\/Site Language<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":120455,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[565,525],"class_list":["post-120357","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-display-conditions","docs-plus-extras"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/120357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=120357"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/120357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/120455"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=120357"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=120357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}