Remove Leading Zeros in the Countdown Module

Written by Dan Mossop

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:

Troubleshooting

Both original and zero-less countdown timers are showing

Some plugins (such as Divi Timer Pro) or custom code may cause the original version of the countdown timer to show above the version with the zeros removed. In this case, you should be able to force the original version of the countdown timer to be hidden by adding this CSS code to your site:

.et_pb_countdown_timer .section.values > p.value {
    display: none !important;
}

Unlock the Full Potential of Your Divi Site with Divi Booster!

Improve your Divi countdown module by removing leading zeros effortlessly. The Divi Booster plugin lets you customize the countdown timer to remove leading zeros on the Days part, giving your timer a cleaner look without any manual coding.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

37 Comments

  1. Hi Dan

    The code works perfectly! Thank you very much!

    Reply
    • Great to hear! You’re very welcome, Wei :)

      Reply
  2. I am using the jQuery to remove both the leading zeros. My issue is that it's creating the duplicate content but not hiding the original, it looks like this: https://www.screencast.com/t/ydJ186ItIlC

    I've removed the code for now since the page is live. So it will look normal with the leading zeros. Any ideas?

    Reply
    • Hey Christina, it looks like there's a CSS rule being added to your site by Divi Timer Pro which is overriding the jQuery code's attempt to hide the original. It also looks like you've been able to solve this by using the following CSS, right?:

      .et_pb_countdown_timer .section.values>p.value {
          display: none!important;
      }
      

      Your solution seems to be working nicely. But give me a shout if you are still having trouble with it. Thanks!

      Reply
  3. Works a treat! Thank you 🙏

    Reply
    • You're welcome, Emma!

      Reply
  4. 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
  5. 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
  6. Hey Dan

    Your code works like a charm.

    Many Thanks

    Reply
    • You're very welcome, Ali!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest Posts

Fade a Divi Image Module Edge into the Background

Want to create a stylish fade effect on your Divi image module—where one side fades smoothly into the background? With a bit of CSS, you can make any edge (or corner) of the image fade out: top, bottom, left, right, or even diagonally.Fade a Divi Image Module Edge...

Hide the Header and Footer in the Hello Elementor Theme

Removing the default header and footer from your Hello Elementor theme allows for a streamlined and distraction-free website design. This is especially useful when creating unique landing pages, full-width layouts, or custom headers and footers with a page builder. In...

Setting up the Divi Password Box Module

Setting up password protection on a page can help you control access to sensitive or private content in WordPress, allowing only authorized visitors to view certain sections. With the Divi Password Box module, you can replace the plain Divi password form with a fully...

Open Divi Social Media Icons in a New Tab

Ensuring your website's social media icons open in a new browser tab creates a seamless user experience and keeps visitors engaged with your site while allowing them to explore your social media presence. This approach prevents users from navigating away from your...

Set Hover Color for Menu Links in the Divi Menu Module

Customizing the hover color of menu links lets you enhance the user experience and maintain visual consistency with your website’s brand. By setting a specific hover color, you can guide visitors' attention and improve navigation feedback. In this guide we show you...

Random Posts