Remove Leading Zeros in the Countdown Module

This post may contain referral links which may earn a commission for this site

Remove Leading Zeros in the Countdown Module

The Divi Theme's countdown module allows you display a running timer which counts down to a given date and time. By default, the timer shows leading zeros on its numbers. Here's how you can remove those leading zeros.

Remove the Leading Zero on the Days

The number of days remaining is always shown with 3 digits, like so:

If the event is close (i.e within 100 days), the leading zero on the days is unnecessary and looks a bit clumsy. To sharpen things up, we can remove the leading zero if present, to get something like this:

Removing the Leading Zero on the Days with Divi Booster

Divi Booster has an option to remove the leading zero on the Day(s) part of the countdown timer. You will find it at:

Divi > Divi Booster > Modules > Countdown > Hide Leading Zero on Days

To activate it, simply check the box and save the settings.

Removing the Leading Zero on the Days with jQuery

The following jQuery code can be used to to remove the leading zero if present:

<script>
jQuery(function($){
	
	var olddays = $('.et_pb_countdown_timer .days .value');
	
	// Clone the days and hide the original. 
	// - Wraps new days element in a span to prevent Divi from updating it
	olddays.each(function(){
		var oldday = $(this);
		oldday.after(oldday.clone());
		oldday.next().wrap('<span></span>');
	}).hide();
	
	// Update the clone each second, removing the trailing zero
	(function update_days() {
		olddays.each(function(){
			var oldday = $(this);
			var days = oldday.html();
			if (days.substr(0,1) == '0') { days = days.slice(1); }
			oldday.next().find('.value').html(days);
		});
		setTimeout(function(){ update_days(); }, 1000);
	})()

});
</script>

Remove all Leading Zeros

If you'd like to remove the leading zeros on all the values in the countdown timer, you can do so with the following jQuery code:

<script>
jQuery(function($){
	
	var oldvals = $('.et_pb_countdown_timer .value');
	
	// Clone the vals and hide the original. 
	// - Wraps new vals element in a span to prevent Divi from updating them
	oldvals.each(function(){
		$(this).after($(this).clone()).next().wrap('<span></span>');
	}).hide();
	
	// Update the clones each second, removing the trailing zeros
	setInterval(function () {
		oldvals.each(function(){
			var oldval = $(this);
			var val = oldval.html();
			val = trim_leading_zeros(val);
			oldval.next().find('.value').html(val);
		});
	}, 250);
	
	function trim_leading_zeros(str) {
		if ((str.length > 1) && (str.substr(0,1) === '0')) {
			return trim_leading_zeros(str.slice(1));
		}
		return str;
	}

});
</script>

Here's an example of the result of applying this code:

Want get more out of Divi?

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

33 Comments

  1. Works a treat! Thank you 🙏

    Reply
    • You're welcome, Emma!

      Reply
  2. Thank you Dan!

    I added a Divi Code module to the row and added the script tags as suggested.

    HOWEVER, can you give us a modified version to remove double zeros and make them single zeroes, AND to remove a single leading zero when there is a single digit after it?

    E.g.

    Right now (after your above script) our countdown shows:

    05 Days : 00 Hours : 57 Minutes : 00 Seconds

    We'd like it to be:

    5 Days : 0 Hours : 57 Minutes : 0 Seconds

    BTW I own the license to your awesome Divi Booster plugin and love it!

    Reply
    • You're welcome, Chris! I've just updated the post with a section on how to remove all leading zeros, which should give you the effect you're after. Hope it helps, but let me know if not. Cheers!

      Reply
  3. it is not working for me at all. where do i put it? if i put it into the head or body area for scripts, nothing happens and the code just shows up on the page.

    Reply
    • Hi René, that means the code is being added correctly, but is being treated as text instead of as a script. To solve this, put the code between script tags, i.e. begin it with <script> and end it with </script>

      Reply
  4. Hey Dan

    Your code works like a charm.

    Many Thanks

    Reply
    • You're very welcome, Ali!

      Reply

Submit a Comment

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

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

33 Comments

  1. Works a treat! Thank you 🙏

    Reply
    • You're welcome, Emma!

      Reply
  2. Thank you Dan!

    I added a Divi Code module to the row and added the script tags as suggested.

    HOWEVER, can you give us a modified version to remove double zeros and make them single zeroes, AND to remove a single leading zero when there is a single digit after it?

    E.g.

    Right now (after your above script) our countdown shows:

    05 Days : 00 Hours : 57 Minutes : 00 Seconds

    We'd like it to be:

    5 Days : 0 Hours : 57 Minutes : 0 Seconds

    BTW I own the license to your awesome Divi Booster plugin and love it!

    Reply
    • You're welcome, Chris! I've just updated the post with a section on how to remove all leading zeros, which should give you the effect you're after. Hope it helps, but let me know if not. Cheers!

      Reply
  3. it is not working for me at all. where do i put it? if i put it into the head or body area for scripts, nothing happens and the code just shows up on the page.

    Reply
    • Hi René, that means the code is being added correctly, but is being treated as text instead of as a script. To solve this, put the code between script tags, i.e. begin it with <script> and end it with </script>

      Reply
  4. Hey Dan

    Your code works like a charm.

    Many Thanks

    Reply
    • You're very welcome, Ali!

      Reply

Submit a Comment

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