Use Countdown Timer Pro to count down to a sale, launch, event, webinar, or another date. Add the block to a post or page in the WordPress Block Editor, set a target date, and pick which time units appear. Shortcode integration gives you another way to place a countdown. The timer is designed for desktop, tablet, and mobile layouts.
Choose what appears at zero
To show users a message after the countdown ends, set custom expired content. To conceal the countdown box at zero, use the hide-at-zero option. Visitors can also hide the timer manually with a dismiss button. Device visibility settings let you toggle the timer separately for mobile and tablet.
Configure the timer show
Choose one of four layouts, with additional predefined patterns available in Pro. Select whether to display days, hours, minutes, and seconds. Controls cover the wrapper, countdown boxes, digits, labels, and separators. Set the wrapper width, background, padding, and shadow; adjust box backgrounds, dimensions, borders, and shadows; and set digit and label typography and colors. Separators can be shown or hidden, with settings for type, size, and color. The Single style option lets you set each box's background, digit color, and label color individually.
Arrange content around the countdown
Add and style prefix text before the timer, or place a suffix button after it and adjust the button's typography, color, and padding. Control the layout direction of content before and after the countdown. This lets you pair a message or action with timers for promotions, launches, and events.
Add and publish the block
- Install and activate Countdown Timer.
- In the Gutenberg editor, add the Countdown Timer block from the Widgets block category.
- Set the target date in the block settings.
- Adjust the styling and Pro behavior in the right-side settings sidebar.
- Publish the post or page to display the countdown.
