A countdown timer module for Divi 5
Count down to a date, count up from a launch, follow a campaign through its stages, or count down a WooCommerce product's sale.
A campaign or its own date
WooCommerce product sales
Full, short and single-letter labels
Boxed or unboxed units
Six separator choices
No reload when a stage changes
Four label styles for different spaces
Pick the label style in the module's settings. One and many are written correctly (1 Day, 2 Days).
Label Mode: full
Ends October 1, 2027 at 2:02 pm (UTC).
Full
For landing pages and hero sections.
Label Mode: short
Ends October 1, 2027 at 2:02 pm (UTC).
Short
Saves width on narrow screens.
Label Mode: single
Ends October 1, 2027 at 2:02 pm (UTC).
Single letter
For sidebars and product grids.
Label Mode: None
Ends October 1, 2027 at 2:02 pm (UTC).
No labels
Digits only, like a clock.
Unboxed by default. Boxed when you style the unit box.
There is no hardcoded "Boxed Mode" switch. The module detects whether you have set a background, border, padding, or box shadow under Design > Unit Box in Divi, and applies the de-countdown-timer--boxed class automatically.
Unboxed (Natural Layout)
Ends October 1, 2027 at 2:02 pm (UTC).
Unboxed
Digits and labels sit in a row with no background. Separators line up with the digits.
- Units align naturally at the top
- Transparent background around digits
- Ideal with colon ( : ) or dot ( · ) separators
Boxed
Ends October 1, 2027 at 2:02 pm (UTC).
Boxed
Give the unit box a background, border, shadow or spacing and every unit becomes a box of the same height, with separators centered between them.
- Units stretch to equal height automatically
- Contents vertically centered within each box
- Separators vertically centered between boxes
Six separator choices, skipped by screen readers
Drawn between each pair of units with aria-hidden="true" so screen readers hear the meaningful unit labels instead of punctuation symbols.
:
Colon
separator: colon — Classic digital timepiece layout.
|
Pipe
separator: pipe — Modern vertical bar divider.
/
Slash
separator: slash — Technical slash divider.
.
Dot
separator: dot — Subtle centered middle dot.
–
Dash
separator: dash — Clean en-dash separator.
*
Custom character
separator: custom — Any text you type.
Three sources. One display.
Select where the schedule originates via the Timer Source dropdown in Divi's Content tab.
Source: Campaign
A campaign
Follows a campaign's dates and stages. Change the campaign, and the timer follows.
- Multi-stage transitions without page reload
- Updates across all pages with one campaign edit
- Sets a data-stage attribute for dynamic styling
Source: Manual
Its own date
A date and a city timezone set on the module, counting down or up.
- Counts down to a date (Fixed)
- Counts up from a launch date (Count Up)
- Select any city timezone (e.g. Asia/Kolkata)
Source: Woo Product
A product's sale
Counts down a WooCommerce product's scheduled sale. With sizes or colors, the timer follows the one the visitor picks. An optional stock line sits above the digits.
- Follows variable product sizes automatically
- Optional "Only 7 left" stock scarcity line
- Hides cleanly when product sale ends
Four things the timer can do at zero
Configured under When The Time Is Up in Divi. Never leaves a broken or confusing clock on your live website.
Expired: Hide
Hide the module
Removes the module markup cleanly from the page layout so no blank gaps or broken spaces remain.
Expired: Message
Show a message
Replaces the unit digits with a custom message (e.g. "This offer has ended.") ships with the page.
Expired: Zeros
Stay at zero
Leaves all units frozen at 00:00:00:00 without disappearing or shifting adjacent rows.
Expired: Redirect
Send the visitor to a page
Automatically redirects the visitor's browser to any URL you enter the instant zero is reached.