Create focused countdowns for important dates
Countdown Timer Pro adds advanced behavior and styling controls to a Gutenberg countdown timer. Use it to show visitors how much time remains before a sale ends, a product launches, an event begins, or another deadline arrives. The timer can be added to posts and pages through the WordPress Block Editor, while shortcode integration provides another way to place a countdown where needed.
The countdown is designed for practical use across desktop, tablet, and mobile layouts. You can select from predefined designs, adjust the appearance of the timer, and control which time units are displayed. Pro options extend the basic block with more control over what happens before, during, and after the countdown.
Advanced Pro controls
- Expired display: Show custom content after the countdown has elapsed.
- Hide at zero: Conceal the countdown box when it reaches zero.
- Device visibility: Toggle visibility separately for mobile and tablet devices.
- Prefix text: Add text before the timer and style its presentation.
- Suffix button: Place a button after the timer and adjust its typography, color, and padding.
- Prefix and suffix direction: Control the layout flow of content placed before and after the countdown.
- Single style: Style each countdown box individually, including its background, digit color, and label color.
- Dismiss button: Allow visitors to hide the countdown manually.
- Extra patterns: Use additional predefined countdown designs.
- Shortcode integration: Use the countdown beyond the block placement workflow.
Design and display workflow
Start with one of four distinct layouts and choose whether days, hours, minutes, and seconds should appear. The timer includes controls for the wrapper, countdown boxes, digits, labels, and separators. You can configure wrapper width, background, padding, and shadow, then define box backgrounds, dimensions, borders, and shadows. Typography and colors can be adjusted for digit and label elements, while separators can be displayed and configured by type, size, and color.
For campaign pages, combine a prefix message with a suffix button to place context and an action around the timer. For a launch or event page, use the expired display to replace the countdown with custom content after the target date. Device visibility settings can help you decide where the timer should appear, and the dismiss button gives visitors manual control over its display.
Practical uses
- 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.
- Pair a countdown with a call-to-action button for promotional content.
Installation and setup
- 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 design and Pro behavior from the right-side settings sidebar.
- Publish the post or page to display the countdown.
Countdown Timer Pro is suited to WordPress sites that need a configurable time display with custom styling, post-expiration content, device controls, and flexible placement options.
