Marketing · Elementor
Countdown & Timer widget for Elementor
A countdown to a date (or evergreen) for launches, sales, and events.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A countdown to a date (or evergreen) for launches, sales, and events.
render() writes HTML data attributes: data-actions, data-interval, data-item, data-show-again, data-text, data-type.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-item.
Visitor state is stored in localStorage, not in post meta.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Countdown & Timer”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Type”, “Due Date”, “Stop Showing After Date (Pro)”, “Show Days”. Style and Content tabs are listed on this page.
When to use it
- A product drop.
- A webinar start time.
- A seasonal sale banner.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Type | The chosen value is read in render() and applied on the front end. Options: Due Date; Evergreen (Pro). |
| General — Due Date | Date set according to your timezone: %s. |
| General — Stop Showing After Date (Pro) | When this switch is on, render() outputs the wrapped markup. |
| Content — Show Days | Switcher inspector control (`show_days`). |
| Content — Show Hours | Switcher inspector control (`show_hours`). |
| Content — Show Minutes | Switcher inspector control (`show_minutes`). |
| Content — Show Seconds | Switcher inspector control (`show_seconds`). |
| Content — Show Labels | When this switch is on, render() outputs the wrapped markup. |
| Content — Display | Writes CSS `display` onto the widget’s front-end markup. Options: Block; Inline. |
| Content — Day | Text inspector control (`labels_days_singular`). |
| Content — Days | Text inspector control (`labels_days_plural`). |
| Content — Hour | Text inspector control (`labels_hours_singular`). |
| Content — Hours | Text inspector control (`labels_hours_plural`). |
| Content — Minute | Text inspector control (`labels_minutes_singular`). |
| Content — Minutes | Text inspector control (`labels_minutes_plural`). |
| Content — Seconds | Text inspector control (`labels_seconds_plural`). |
| Content — Show Separators | Switcher inspector control (`show_separator`). |
| Expire Actions — Actions After Timer Expires | The chosen value is read in render() and applied on the front end. Options: Hide Timer; Hide Element; Display Message; Redirect; Load Template. |
| Expire Actions — CSS Selector to Hide Element | Saved on the widget and consumed in render(). |
| Expire Actions — Display Message | Printed in the widget HTML from render(). |
| Expire Actions — Redirect URL | Saved on the widget and consumed in render(). |
| Expire Actions — Select Template | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| General — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-countdown-item`. |
| General — Width | Writes CSS `max-width` onto the widget’s front-end markup. (min 0, max 100). |
| General — Gutter | Writes CSS (margin-left, margin-right) onto the widget’s front-end markup. (min 0, max 100). |
| General — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| General — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-countdown-item`. |
| General — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| General — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-countdown-item`. |
| Content — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Numbers Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Numbers Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-countdown-number`. |
| Content — Numbers Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content — Labels Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Labels Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content — Typography (Labels Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-countdown-label`. |
| Content — Labels Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content — Separator Color | Writes CSS `background` onto the widget’s front-end markup. |
| Content — Separator Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 1, max 50). |
| Content — Dots Margin | Writes CSS (span, margin-bottom) onto the widget’s front-end markup. (min 1, max 50). |
| Content — Separator Border Radius | Switcher inspector control (`separator_circle`). |
| Message — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Message — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Message — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Message — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-countdown-message`. |
| Message — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Message — Top Distance | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 100). |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Countdown & Timer options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Countdown & Timer in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Countdown & Timer”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related marketing widgets
Flip Countdown & Timer
A flip-clock countdown with the same job as Countdown, in a different visual style.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Price List & Menu
A menu or price list: item, description, price, optional image — for restaurants and services.
Form Builder
A form you build in Elementor: fields, layout, and submit behavior for contact, quotes, and lead capture.
Login | Register Form
AJAX login and registration on a normal Elementor page, with validation and optional extra fields.
Mailchimp
A Mailchimp subscribe form styled in Elementor. Connect an audience, then match fields to your list.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Countdown & Timer after you activate it.