Using the countdown

This walkthrough covers the two ways to drive the countdown and what shoppers and screen-reader users actually experience.

Option A, count down your existing sale dates

If you already run WooCommerce sales, this needs almost no work:

1. In WooCommerce → Ticker, leave Countdown source on WooCommerce sale end date (the default).
2. On a product, set Product data → General → Sale price dates → To to a future date.

The product must be on sale and have a To date. The live countdown then appears on that product automatically and runs to the sale end, every product with a sale end gets its own countdown, with no per-product Ticker setup.

Option B, run one store-wide campaign

For a single deadline across the whole store (a Black Friday cut-off, a flash sale):

1. Set Countdown source to Fixed campaign end date.
2. Enter the Campaign end date in Ticker’s settings (interpreted in your site timezone).

Every product then counts down to that one moment, regardless of its own sale dates.

Mixing the two

Leave the source on WooCommerce sale end date and set a campaign date. A product’s own sale end is used when it has one; products without a sale end fall back to the campaign date. This lets a store-wide deadline apply broadly while specific products keep their own clocks. (Choosing Fixed campaign end date as the source skips per-product sale dates entirely.)

Tune the look and copy

• Pick a placement, near the add-to-cart form is the most persuasive; the product summary is the default.
• Choose a format, dhms for long windows, compact to drop the ticking seconds on multi-day campaigns.
• Add a heading (for example Hurry, offer ends soon!) and an expired message for after it ends.

What shoppers see

• A product with a resolvable end time shows a live countdown, led by a Sale ends in label, that ticks down once per second.
• The seconds unit is a stopwatch dial: its ring drains over the minute and the digit snaps on each tick, so time visibly runs out even with the page muted.
• When the countdown reaches zero, the clock is hidden and replaced by your expired message, never a frozen 00:00:00.
• A product with no resolvable end time (no sale end, no campaign date) shows nothing at all.

The expired state

Expiry can happen two ways. If the end time is already in the past when the page loads, the server renders the expired message directly. If the page is open when the clock crosses zero, the script hides the clock, reveals the expired line, and announces it once through the polite live region, no reload needed.

Custom or scheduled end times (developers)

The countdown end is filterable. Use ticker/end_timestamp to return a Unix UTC timestamp for a product (or null to suppress it):

add_filter( 'ticker/end_timestamp', function ( $ts, $product, $settings ) {
  // Push a category's countdown to a fixed launch deadline.
  if ( has_term( 'flash-sale', 'product_cat', $product->get_id() ) ) {
    return strtotime( '2026-11-29 23:59:00' );
  }
  return $ts;
}, 10, 3 );

This is the basis for the scheduled-window features planned for Ticker Pro.

Accessibility and performance notes

The timer is wrapped in a role="group" with a Sale countdown label. The visible clock carries role="timer" but is hidden from assistive technology (aria-hidden), because announcing per-second changes would flood a screen reader. Instead a separate polite live region (role="status", aria-live="polite") announces only on minute boundaries and at expiry, assembling the phrase (for example Sale ends in 2 hrs 5 min) from the already-translated unit labels.

The markup is server-rendered with the digit boxes pre-sized, so the numbers drop into reserved space with no Cumulative Layout Shift. The only script is a single dependency-free file loaded defer in the footer, running one shared interval for every countdown on the page and clearing it once all have expired. The seconds-dial animation respects prefers-reduced-motion; the draining ring stays because it conveys information, not decoration.