The Countdown Timer block in Ultimate Blocks lets you add a live countdown to a date and time on any WordPress post or page. It counts down in weeks, days, hours, minutes and seconds, in a Regular, Odometer or Circular style, and can show a message when time runs out. The block is free, and Ultimate Blocks Pro adds expiry content and a redirect when the countdown ends.

What you can use it for #

• Create urgency for a sale or limited time discount.
• Count down to a product launch, webinar or live event.
• Show how long is left to register, apply or enter a giveaway.
• Show a “This offer has ended” message after a deal expires.
• Swap in new content, or send visitors to another page, when the timer ends (Pro).

How to add the Countdown Timer block #

1. Open the post or page in the WordPress block editor.
2. Click the + (Block Inserter) button.
3. Search for Countdown Timer (or just “countdown”) and click the block to add it.
4. Set the end date in the Timer expiration panel of the sidebar.

Settings tab #

Select the block and open the block sidebar on the right. The Settings tab (gear icon) has these panels:

Timer expiration #

Pick the date and time when the countdown should end from the calendar and time fields. Choose a time in the future. The timer counts down from now to that moment.

Expiry Options (Pro) #

• Show Expiry Content: show your own blocks (text, images, buttons and more) when the countdown ends.
• Enable Redirect: send visitors to another page when the countdown ends. Enter the page address in Redirect URL. Redirect is disabled when expiry content is enabled, so use one or the other.

Displaying unit #

• Largest unit: the biggest unit the timer shows: week, day, hour or minute.
• Smallest unit: the smallest unit the timer shows: day, hour, minute or second.

Time above the largest unit is added into it. For example, if you choose day as the largest unit, 2 weeks and 3 days shows as 17 days. The default is week to second.

Text to show after the countdown is over #

Under the timer in the editor, click Text to show after the countdown is over and type a message, such as “This sale has ended.” Use the alignment buttons in the block toolbar to align the message left, center, right or justified. If you turn on Pro expiry content or a redirect, this text field is replaced.

Styles tab #

Switch to the Styles tab (half-circle icon) to change the look of the timer:

• Styles: choose Regular (plain text), Odometer (rolling digits, the default) or Circular (a ring for each unit).
• Countdown Color: the color of the numbers.
• Unit Color: the color of the unit labels (Weeks, Days, Hours, Minutes, Seconds).
• Circle Color: the ring color. This option shows only with the Circular style.
• Dimension Settings: padding and margin around the block.

Pro features #

• Show Expiry Content: replace the timer area with any blocks you choose once the time is up. Read how to add a custom message after the countdown timer expires.
• Redirect when the countdown ends: send visitors to a new URL automatically, for example from a pre-launch page to the sales page. Read how to redirect visitors when a countdown ends.

Get Ultimate Blocks Pro to unlock these features.

Extensions you can use with this block #

• Visibility Control (Pro): show the block only to certain users or on a schedule.
• Animation (Pro): animate the block when it comes into view.
• Responsive Control: hide the block on desktop, tablet or mobile.
• Custom CSS: add your own CSS to this block only.
• Saved Styles (Pro): save your design and reuse it on other posts.

Frequently asked questions #

Related docs #

• How to add a custom message after the countdown timer expires
• How to redirect visitors when a countdown ends
• Coupon block (Pro)
• Call to Action block
• Visibility Control