Hide section inside a page based on a date/time

Site URL: https://www.heyuhuman.com/the-foundation

Hello community! 

For a limited time, we are doing a promotion/bonus for people who purchase before a specified date. I know there is coding to show a countdown timer on the page but is it possible to have the section hidden after the time expiry. Having a countdown showing BONUS EXPIRED is a purchasing deterrent so I'd rather the section just be hidden so it's just purchasing as normal. 

Thank you so much for your expertise! 

Yes it should be possible with some Javascript which would require the business plan or above.

Since this would be done client-side, in the browser, there is a caveat. The code could be gotten around or might fail in certain circumstances. If you can live with those limitations, let us know and we might be able to come up with some code.

The manual way to do this would be to have someone make changes in the site at the appropriate time. So if someone stayed up till midnight then they could make the changes and there would be no need for code that could fail in some circumstances.

Amazing. Thank you! 

Yes I have a.a business plan do we're good there. If it's not 100% perfect that's fine too. 

Definitely don't want anyone staying up until midnight 🤣 not THAT important. 

Please see Section Date Hide.

Let us know how it goes.

@creedon I've been following your solutions and would like to thank you for all of your work. I will also donate on your github accordingly.

Hoping you can help me - I tried utilizing this solution in conjunction with your code from Jul 26 in Looking to remove or disable the add to cart button on the product page . I'm having trouble modifying the selector in this code to work with #item. Can you please offer a suggestion when you get a chance?

In short, for a specific product page, I have the 'Add to Cart' button hidden initially. I then want the script to execute and display the button if it's after a specific date and time.

https://calliope-burgundy-25l9.squarespace.com/tix/p/country-feast-set-3nybt-64ce4-w46gd

Thank you.

6 hours ago, oyolab said:

Hoping you can help me

Site-wide password?

@creedon sorry about that, the password is: 123

On 2/18/2023 at 9:30 AM, oyolab said:

Hoping you can help me - I tried utilizing this solution in conjunction with your code from Jul 26 in Looking to remove or disable the add to cart button on the product page.

Although elements of the codes you mention may be helpful, the effect you want is coming from the other direction. You want to hide the atc button until a certain date/time. I think fresh code would be a better direction.

Do you want this effect for just one product or will you want to apply it to multiple products?

@creedon I would like the ability to put this into effect for specific products please.

On 2/20/2023 at 6:24 AM, oyolab said:

I would like the ability to put this into effect for specific products please.

That should be doable. Give me several days to see what I can come up with.

Another question. Are the users of the site only going to be local or do you expect folks from other time zones to want to buy products? I ask because working with time zones is a nightmare on computers. It hurts my brain! 🙂

@creedon Awesome, thank you sir. Local time(EST US) is fine, the website will specify all timing in EST.

It's also highly unlikely folks from other time zones will visit the page.

On 2/18/2023 at 9:30 AM, oyolab said:

In short, for a specific product page, I have the 'Add to Cart' button hidden initially. I then want the script to execute and display the button if it's after a specific date and time.

Please see Store Product Detail Add To Cart Show After Date Time.

Note this code takes care of hiding the atc buttons for you. This code hides all atc buttons and then decides to show or not.

Remove any existing atc button hiding code you have.

Let us know how it goes.

I came across this looking for a similar solution - I'm using a free elfsite plugin for reviews on a client's site. When they reach the free views it disappears for the remainder of the month. I thought I'd hacked my way around that by hiding a 'See reviews' link underneath the widget so that it was visible whenever the widget wasn't, but the link isn't clickable, presumably because it's underneath the code block. Is there a way for it to be hidden only when the views have expired? https://www.thefiftychoir.com/ 

@creedon  Any help would be hugely appreciated!

On 9/5/2023 at 4:30 AM, kellyhutsbydesigns said:

the link isn't clickable, presumably because it's underneath the code block.

This is exactly the issue. The code block is covering the text block and so the link can't be clicked.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<script>

  document.addEventListener ( 'DOMContentLoaded', ( ) => {
  
    /*
    
      elfsite plugin code block z-index change when no reviews
      
      Version     : 0.1.0
      
      SS Version  : 7.1
      
      Fluid
      Engine
      Compatible  : Yes
      
      By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const selector = '[class^="elfsight-app-"]';
    
    const element = document
    
      .querySelector ( selector );
      
    const hasReviews = element
    
      .children
      
      .length;
      
    if ( hasReviews ) return; // bail if reviews
    
    element
    
      .closest ( '.fe-block' )
      
      .style [ 'z-index' ]
      
      =
      
      'unset';
      
    } );
    
  </script>

Let us know how it goes.

On 11/18/2021 at 6:24 PM, creedon said:

Please see Page Section Hide After Expiration Date.

Let us know how it goes.

Hi,

This code doesn't seem to be working for me, though I'm pretty sure I've used it correctly as directed.  Any chance you could advise where I'm going wrong?

https://www.pelvicpriestess.co.uk/theredthread-booking

I'm wanting to hide the data section with the Early Bird offers at the end of May 11th 2024, and then show the data section below with the Standard offers to replace it (i've currently hidden the Standard data section as it's a live page, and I don't want it showing at moment).

I can't get the code to hide the first section (i've been testing using today's date and time), and I'm hoping you can advise on code to show the replacement section.

Many thanks

3 hours ago, riverwyre said:

This code doesn't seem to be working for me, though I'm pretty sure I've used it correctly as directed. 

Try the following.

const dataSectionId = '66142dbb7069ae1114d3556b';

I updated the Notes for the code to hopefully clarify the value needed.

Let us know how it goes.

Amazing - it works!

So, if I want to make the second section appear when the first one disappears, can I simply use the same code on the second section (changing the data section id) but on the last line, change 'display', 'none' to ''display', 'flex'?  Tell me it's that easy!!!

Many thanks for your help!

12 hours ago, riverwyre said:

if I want to make the second section appear when the first one disappears, can I simply use the same code on the second section (changing the data section id) but on the last line, change 'display', 'none' to ''display', 'flex'?  Tell me it's that easy!!!

I don't think it's that easy.

I know of no code that does what I think you want. The code would need to be able to work with multiple sections and it would need to understand date ranges.

I have updated my cited Section Date Hide code in my November 18, 2021 post.

From the changes.

• support date ranges
• make work with more than one section

Let us know how it goes.

@riverwyre