Countdown Timer Pro

Choose what the deadline should display

Countdown Timer Pro includes controls to a Gutenberg countdown timer for sales, product launches, events, webinars, and other dated content. Add the block to a post or page in the WordPress Block Editor, or use shortcode integration to place a countdown beyond the block workflow. The timer is designed for desktop, tablet, and mobile layouts, with separate visibility toggles for mobile and tablet.

Choose one of four layouts, then choose whether to show days, hours, minutes, and seconds. Pro also includes extra predefined countdown patterns.

Adjust the timer’s appearance

Styling 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 for digits and labels. Separators can be shown or hidden, with settings for type, size, and color. Each countdown box can also be styled individually, including its background and digit and label colors.

Set the behavior around expiration

The expired display can show custom content after the countdown elapses. A separate hide-at-zero option conceals the countdown box when it reaches zero. Visitors can also dismiss the countdown manually.

Add prefix text before the timer and style its presentation. A suffix button can follow the timer, with controls for typography, color, and padding. Direction settings let you control the layout flow of content placed before and after the countdown. These options can frame a campaign message and button around the deadline.

Put the controls to use

For a sale, set the deadline and choose which time units to display. For a launch or event, configure custom content for after the countdown ends. Device visibility settings control whether the timer appears on mobile or tablet, while the dismiss button lets visitors hide it themselves.

• Count down to the end of a discount or limited-time offer.
• Build anticipation for a product or site launch.
• Show the start time of an event or webinar.
• Place a call-to-action button after a countdown.

Add the countdown to a post or page

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 styling and Pro behavior in the right-side settings sidebar.
5. Publish the post or page to display the countdown.