Three kinds of countdown
A date and time, for a launch or a sale that ends for everyone at once. A product's own sale end, read from WooCommerce. Or a length of time per visitor, starting when they first see it.
Countdown timers that create real urgency — on a product, across the shop, or holding a basket at the checkout.
The complete list — what each part does and what it is there for.
A date and time, for a launch or a sale that ends for everyone at once. A product's own sale end, read from WooCommerce. Or a length of time per visitor, starting when they first see it.
A sale campaign takes its end from the product's own "sale price dates", including each variation's, so the timer and the price can never disagree. Nothing to type twice and nothing left running after the sale.
On a product page, under the price. On shop and category listings. As a bar across the top of the site. Above post and page content. Plus a shortcode for anywhere else.
Every product, a category, a tag, or particular products — all chosen by name, never by ID — and an exclude list that always wins. A parent category covers everything inside it.
Tick the places, kinds of content and archives a campaign belongs on, then name the exceptions. A sale bar everywhere except the checkout takes one entry.
A campaign can be limited to desktop, tablet or mobile — decided by the width of the window, so it survives page caching — to signed-in or signed-out visitors, or to particular roles from your own site's list.
Blocks, plain, outline, pill, digital, rings, flip and a full-width ribbon. Each is one modifier on the same markup, so they behave identically and stay in step.
No font is loaded and no size is imposed. The timer inherits your theme's type and takes three colours from you — accent, text and the surface behind it — so it belongs to the page rather than arriving on it.
A line above the clock, which units to show, whether they are labelled "days" or "d" or not at all, and what happens at zero — disappear, leave a message, or sit at zero.
Start a clock when the first item goes in, show it on the basket, the checkout or every page, and apply a real WooCommerce coupon while it runs. When it expires the coupon comes off and the basket is left exactly as it was.
Every countdown is worked out against the site's own time zone and sent to the browser as remaining seconds, so a visitor whose device clock is wrong still sees the right answer.
An evergreen countdown records when someone first saw it and survives a page cache, so a visitor who returns finds it expired rather than reset. Genuinely recurring offers can repeat daily or weekly, and say so.
The remaining time is rendered on the server and already correct in the markup. The script only keeps it moving, is deferred, and recalculates from a timestamp — so a cached page never shows a stale clock.
One small stylesheet and one small script, on the pages that use them only. No jQuery on the front end, no web fonts, no third-party requests and nothing stored about your visitors beyond when they first saw a timer.
The remaining time is announced once in words for screen readers rather than a counter that interrupts every second, and the figures are tabular so the page does not shift as the digits change.
Every label, hint and message ships translated, plurals included, and works the same on a multisite network where each site keeps its own campaigns.
Every screen in the plugin arrives without a page load, and every save happens where you are standing. WordPress fetches the whole of wp-admin's CSS and JavaScript again to change one panel; this fetches the panel. The screen you are on is still there while the next one is on its way, and the one you are heading for is usually already in hand — a pointer takes a moment to reach a menu item, and that moment is spent fetching.
A save answers in the corner of the screen, bordered in the colour of what it is telling you and saying what was saved rather than just "Saved". Four seconds, and hovering holds it open. No reload, and no scrolling back to find a notice above the header three hundred pixels from the button you just pressed.
A WordPress admin request spends about a second in its own bootstrap before a plugin gets a word in, and fetching when your pointer arrives only buys back a fraction of it. So the plugin's other screens are fetched quietly while you read the first one — one at a time, only while the browser is idle, and never on a metered connection. By the time you click a tab the answer has been in memory for seconds.