Countdown Timer Pro

Countdown Timer Pro adds settings to a Gutenberg countdown for sales, launches, events, webinars, and other dates. Add the block to a post or page in the WordPress Block Editor, set a target date, then select what the timer shows. The timer is designed for desktop, tablet, and mobile layouts. Shortcode integration gives you another way to place a countdown beyond the block process.

Set the date and visible units

Choose whether to show days, hours, minutes, and seconds. The target date determines when the countdown reaches zero; the selected units determine which time values visitors see. Start with one of four distinct layouts, or choose from the additional predefined patterns available in Pro.

Choose what appears at zero

The zero reading means the configured target date has arrived. It does not describe whether a sale or event has ended, so use expired content to communicate what visitors should know next. Pro can show custom content after the countdown elapses, or conceal the countdown box when it reaches zero.

Style the timer and surrounding content

The wrapper is the outer area around the timer. Set its width, background, padding, and shadow. Configure the countdown boxes with backgrounds, dimensions, borders, and shadows, then adjust digit and label typography and colors. You can also style each box individually, including its background, digit color, and label color.

Separators are the marks between the time units. Choose whether to show them, then configure their type, size, and color. Add prefix text before the timer and style it, or place a suffix button after the timer and adjust its typography, color, and padding. Prefix and suffix direction controls the layout flow of content before and after the countdown.

Control where the countdown appears

Toggle visibility separately for mobile and tablet devices. A dismiss button lets visitors conceal the countdown manually. These controls affect the timer's show; they do not change its target date or explain the status of a promotion or event.

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

Install and set up

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.