Need code to hide checkout section and show after delay

1

Hi,

On my funnel page I need to hide the checkout section when the page loads and only reveal it after a delay (around 280 seconds).

In the Funnelish editor/preview I managed to make it work with custom code, but on the published version the checkout always shows immediately and my code doesn’t take effect.

Can you please provide the correct snippet to:

  1. Hide the checkout section initially (no flash).
  2. Reveal it automatically after X seconds (default 280s).
  3. Allow a querystring bypass like ?showCheckoutNow=1 so it shows immediately when needed.

Thanks a lot!

2

Hi @Rodrigo_carniel :waving_hand: you can try this simple snippet. It hide checkout first, then show after 280s. Also add querystring bypass.

:backhand_index_pointing_right: To stop that flash, you should combine CSS + JS:

  1. CSS hides immediately (no flash)
.checkout-section {
  display: none !important;
}
  1. JS reveals it later (or bypass)
<script>
document.addEventListener("DOMContentLoaded", function() {
  const checkout = document.querySelector(".checkout-section"); // adjust class if needed
  if (!checkout) return;

  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get("showCheckoutNow") === "1") {
    checkout.style.display = "block";
    return;
  }

  setTimeout(() => {
    checkout.style.display = "block";
  }, 280000); // 280s
});
</script>

Make sure to replace .checkout-section with the exact selector from your funnel.

This way no flash on load, and still works with the delay or query string.

1 Like