Change the Divi Countdown Timer Labels

Replace the countdown timer module's "Day(s)", "Hour(s)", etc, text.

The Divi Theme countdown timer module is a handy way to announce the number of days, hours, minutes and seconds left until an event. The module doesn't currently give you an option to change the "Day(s)", "Hour(s)", "Minute(s)" and "Second(s)" text to something of your choosing. If you want to change these labels, here are a couple of ways to do it.

Changing the Countdown Timer Labels with Divi Booster

As of Divi Booster 2.5.9, there is a new option for easily modifying the countdown timer module's labels.

In the Countdown Timer Module Settings, you'll find a "Use Custom Labels" option added by Divi Booster. Set this to option to "Yes" and some additional fields will appear (as shown below). These let you set the text of the various labels on both standard view and mobile view. No need for code, and you can control the labels on a module-by-module basis.

Changing the Countdown Timer Labels with JavaScript

The following jQuery code can be used to modify the countdown timer labels:

The example above removes the parentheses from the labels (i.e. converting "Day(s)" to "Days", etc). But you can change the labels to whatever you like by modifying the lines that look like "days.data('full', 'Days');" to, for example, "days.data('full', 'My Label Text');".

You'll notice that there are different labels used by the countdown timer when displayed on mobiles (and thinner columns), which you can also adjust by changing the lines below "// Change labels on mobile".

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

5 Comments

  1. Magnus Sarnevang

    Love this! Finally an easy way. As I've been looking for this. Really appreciate your add-on. It makes great use of our web.

    Reply
    • Magnus Sarnevang

      Hmm, strange. Activated custom headings but it do not work. Empty cache on both server and in browser. But it does not help. I may return to the workaround and use the same color as the background color, to hide the incorrect translations.

      Reply
      • dan

        Hey Magnus, I just implemented this today and maybe I missed something. I'm just finishing for the night, but if you're able to send me a link to the page you're working on, I'll take a look tomorrow and see if I can spot the problem. In the meantime, it might be best to do your color change trick. It won't stop me being able to see what I need to. Hopefully I can get you up and running so you can put the correct translations in place. Thanks!

        Reply
          • dan

            Ha ha! Not even slightly 🙂 The issue was that my code wasn't applying correctly on non-English sites. I've come up with a fix that will be in v2.6.0, which should be out in the next day or so. Hopefully that will solve it for you, but let me know if not. Cheers!

Submit a Comment

Your email address will not be published. Required fields are marked *