Tassos Marinos Tassos Marinos Joomla Extensions

ACF Countdown - Add a Countdown Timer in Joomla

Updated 06 Feb, 2024

The "ACF - Countdown" custom field allows you to use countdown timers to create anticipation around upcoming events, creating the feeling of scarcity, anticipation, and drive more sales.

The Countdown Field comes built-in with pre-defined layouts that you can use to get started creating your countdown timers as well as provides a plethora of settings that you can use to fine-tune how your countdown timer looks, and feels.

How to add a Countdown Timer Custom Field to Joomla! Articles

The Countdown Field can be used with any component that supports the Joomla! Fields such as the Articles (com_content), User (com_user), and the Contact (com_contact) component. Let's see a real-world example of how content authors can add a Countdown Timer to a Joomla article and let website visitors know of an upcoming sale on the front end.

Step 1: Create a new Countdown Field

Go to Content -> Fields, and click New to create a new field. From the Type dropdown, select the "ACF - Countdown" option.

acf countdown field settings

Click to save the field and return to the same page where now, you can see the field customization options.

Step 2: Select the Countdown Type

Under the "TIMER" group, you can define the Countdown Type, Timezone, as well as the action when the countdown expires. In our case, we have decided to use the "Fixed Date" type, use the Client's Timezone as well as hide the timer when it ends.

acf countdown field timer settings

Step 3: Select the Countdown Template

Under the "TEMPLATE SELECTOR" group, you can select the Countdown template, either from a pre-defined list of templates or create your own using HTML and some helpful Smart Tags. In our case, we have selected the second template from the pre-defined templates.

acf countdown field template settings

Step 4: Customize the Countdown Colors

At the bottom of the settings, you can find all color-related settings. You can customize the look of your countdown according to your site's design to make it look and feel as you desire.

acf countdown field color settings

Step 5: Customize the Countdown Units (Optional)

Under the "UNIT DISPLAY" section, you can define which units to display (days, hours, minutes, and seconds). We let the selected template's default settings.

acf countdown field unit display settings

Step 6: Select the Countdown Date in the Joomla Article

Now that we have our Countdown field properly configured, we should see it on the article's editing page. Head over to Joomla Content and click to edit the article you want to add a countdown timer to. In most cases, the Countdown Field should be in the Fields tab. Once there, click the Calendar icon and select a future date.

acf countdown field select countdown date

You’re now done! Once you’ve finished setting your countdown timer's date, save the article and go to your front end to enjoy your countdown.

acf countdown field article preview

Note: You can read more below for advanced settings awaiting for you to fine-tune your countdown as per your needs.

The Countdown Field Settings

Below, you can find a list of the available options of the Countdown Field.

NameDescription
Show Advanced Settings By default, the Countdown field will display only settings related to appearance, such as colors.
However, you can toggle between showing all settings and appearance settings.
Timer
Type The type of the countdown. This can either be static or evergreen.

Fixed Date: The default countdowns that require a fixed date to countdown to.

Evergreen: This countdown requires a set of days/hours/minutes/seconds to countdown to. Each user that views the countdown will see the same countdown.
Date Timezone The timezone that will be used in the countdown.

Use Joomla Timezone: The given date will be transformed to UTC and then the server (site's) timezone will be applied to it.

Use Visitor's Timezone: The given date will automatically be adjusted to the client's (user's) timezone.

Note: This will only work for countdown with Fixed Date type.
On Countdown Expire What action should the countdown perform upon ending? Available values are: keep, hide, restart, message, and redirect

No Action: Let the countdown appear with zeroes upon ending.

Hide timer: Hide the countdown timer once it ends.

Show Message: Show a message once the countdown timer ends.

Redirect to URL: Redirect to a URL when the countdown timer ends.


Note: When "Evergreen" type is selected, the countdown will always restart when it ends.
Show Message Enter the text that will appear when the countdown ends and On Countdown Expire is set to Show Message.
Redirect to URL Enter the URL where the user will be redirected to when the countdown ends and On Countdown Expire is set to Redirect to URL.
Template Selector
Type Select whether to use a pre-defined countdown template or use a custom format.
Template The template consists of 8 pre-dfined templates that you can choose from.
Custom Format Using the Custom Format, you can write your own HTML as well as use the following Smart Tags:

  • {days}: To retrieve the days till the countdown
  • {hours}: To retrieve the hours till the countdown
  • {minutes}: To retrieve the minutes till the countdown
  • {seconds}: To retrieve the seconds till the countdown
Unit Display
Days Set whether to display the days.
Days Label Set the days label.
Hours Set whether to display the hours.
Hours Label Set the hours label.
Minutes Set whether to display the minutes.
Minutes Label Set the minutes label.
Seconds Set whether to display the seconds.
Seconds Label Set the seconds label.
Enable Separator Set whether to include a separator between the countdown items.
Enable 00 Number Format Set whether to display numbers in 0 or 00 format.
Unit Item
Item Size Set width and height of each countdown item.
Gap Set the gap between countdown items.
Item Padding Set the padding for each countdown item.
Background Color Set background color of each countdown item.
Border Set border of each countdown item.
Border Radius Set border radius of each countdown item.
Unit Digits Container
Padding Set digits wrapper padding in each countdown item.
Border Radius Set digits wrapper border radius in each countdown item.
Background Color Set digits wrapper background color in each countdown item.
Digits Container Custom Width Set digits wrapper minimum width in each countdown item.
Unit Digit
Font Size Set each digit font size.
Font Weight Set each digit font weight.
Padding Set each digit padding.
Border Radius Set each digit border radius.
Gap Set the gap between the digits.
Background Color Set each digit background color.
Text Color Set each digit text color.
Digits Custom Width Set each digit minimum width.
Unit Label
Font Size Set label font size.
Font Weight Set label font weight.
Space between label and digits Set label margin top.
Text Color Set label text color.

Countdown Field Previewer

The Countdown Field provides a built-in previewer so you can see how the countdown timer will look on your front-end without having to hit save, go to the front end, refresh the page, view the countdown timer, go back to the settings page, edit it and repeat.

On the bottom right of the Countdown field settings, you will notice the Previewer which will automatically update whenever you make changes to field settings.

acf countdown previewer

The previewer can be minimized, or even maximized, where you can toggle between the desktop, tablet, and mobile devices so you can see how your countdown will look like across different devices.

Frequently Asked Questions

How can I override the layout of "ACF - Gallery" custom field?

To override the "ACF - Gallery" custom field, read here: How to override the "ACF - Gallery" custom field.

Can I use ACF - Countdown with YooTheme Pro Dynamic Content?

YooTheme Pro does not seem to allow Dynamic Content to work with their Countdown element.