web_countdown Shortcode
The web_countdown shortcode displays the days, hours, minutes and seconds until a deadline. It stops at zero and does not enforce access, booking or purchase restrictions.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_countdown countdown_end="2027-01-01T00:00:00+01:00" countdown_text_color="2"]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
countdown_end |
Empty | ISO date/time with Z or an offset; Legacy YYYY-MM-DD HH:MM; date-only YYYY-MM-DD |
Target deadline; timezone rules below. |
countdown_text_color |
Inherit | Palette slot 1–15, or empty | Adds the existing text-main-N class. |
days_label, hours_label, minutes_label, seconds_label |
Translated Days, Hours, Minutes, Seconds | Plain text | Labels below the numbers; also available in Page Builder's Labels tab. |
device_visibility |
Visible everywhere | Existing web-hide-on-xs, web-hide-on-sm, web-hide-on-md, web-hide-on-lg classes |
Hides the component in the selected device ranges. |
el_id |
Empty | Unique HTML ID | Optional countdown anchor. |
el_class |
Empty | Space-separated existing helper classes | Additional presentation helpers, without generated CSS. |
Date and timezone behavior
Use an explicit offset or Z for one worldwide deadline. 2027-01-01T00:00:00+01:00 and 2026-12-31T23:00:00Z are the same instant. An offset is fixed; choose the offset applicable on the event date.
Existing date/time strings without an offset keep their visitor-local meaning. Thus 2027-01-01 00:00 finishes at each visitor's own midnight, not simultaneously worldwide. Date-only values such as 2027-01-01, including preorder dates, retain their previous UTC-midnight meaning. Stored values are not migrated or reinterpreted as the site's timezone.
Invalid dates show dashes, and completed countdowns stay at zero. Without JavaScript, the entered deadline remains visible. The device clock controls the displayed count. Screen readers are not prompted every second.
For a regional timezone picker and explicit repeated-hour choices, use the Gutenberg Countdown block.
Customize the stylesheet
Administrators can replace the complete Countdown stylesheet under Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Countdown. Saving publishes an optimized per-site copy without adding the stylesheet to pages that do not contain the shortcode. Reverting returns the existing web-countdown handle to the current countdown.min.css supplied by the theme. The target date, four time values and labels, responsive classes, shortcode attributes, generated markup, and existing web_countdown script remain unchanged.
Verification
Preview a future deadline, an expired one and the required device widths. Confirm the labels, color and timezone. Both the stylesheet and existing script are requested only when Countdown is present; disabling Page Builder administration does not disable rendering.