Choose a layout and countdown units

Countdown Timer Pro extends a responsive Gutenberg countdown block for deadlines such as a sale ending, a product launch, or an event beginning. Add the block to a post or page in the WordPress Block Editor, or use a shortcode to place the countdown beyond the block workflow. Choose one of four layouts and select whether to display days, hours, minutes, and seconds. Pro adds extra predefined countdown designs.

Style the wrapper, boxes, and timer details

Controls cover the wrapper, countdown boxes, digits, labels, and separators. Set the wrapper width, background, padding, and shadow. Configure box backgrounds, dimensions, borders, and shadows, then adjust the typography and colors of the digits and labels. Separators can be shown or hidden, with settings for their type, size, and color.

Place prefix text before the timer and a suffix button after it. Style the prefix presentation and adjust the button typography, color, and padding. Prefix and suffix direction options control the layout flow around the countdown.

Control what users see

• Show custom content after the countdown has elapsed.
• Hide the countdown box when it reaches zero.
• Set visibility separately for mobile and tablet devices.
• Add a dismiss button so visitors can hide the countdown manually.

Use countdowns for campaigns and events

• Count down to the end of a discount or limited-time offer.
• Build anticipation for a product or site launch.
• Show when an event or webinar begins.
• Pair the timer with a call-to-action button for promotional content.

Add a countdown in the editor

1. Install and activate Countdown Timer.
2. In the Gutenberg editor, add the Countdown Timer block from the Widgets block category.
3. Set the target date in the block settings.
4. Adjust the design and Pro behavior in the right-side settings sidebar.
5. Publish the post or page to display the countdown.