The Divi Countdown Timer module is a visual timer that counts down to a date you set in the module. By default, the countdown will add days, hours, minutes and seconds to the output of the module.
There is no option within the module to hide the days, hours, minutes or seconds so you will need to do this using CSS if required.
Use the following CSS code to hide the seconds, minutes, hours are required. You can add this CSS into your Page Settings custom CSS box, your Theme Options Custom CSS box or into a child theme stylesheet.
Remove countdown seconds number and title
.et_pb_countdown_timer .section.seconds, .et_pb_countdown_timer .sep { display:none; }
Remove countdown minutes and seconds numbers and titles
.et_pb_countdown_timer .section.minutes, .et_pb_countdown_timer .section.seconds, .et_pb_countdown_timer .sep { display:none; }
Remove countdown hours, minutes and seconds numbers and titles
.et_pb_countdown_timer .section.hours, .et_pb_countdown_timer .section.minutes, .et_pb_countdown_timer .section.seconds, .et_pb_countdown_timer .sep { display:none; }
Remove the leading 0 in the days so 012 days becomes 12 days
The countdown number for days has 3 digits by default which is great if you want to have a countdown with more than 99 days, but for fewer days the extra leading zero looks strange.
You can remove this extra 0 by adding a code module to the page and including the following code which was originally posted on the Divi Booster website. You can also integrate this into the Divi Theme Options integration section if you would like it added sitewide.
<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>
Great post. Have used this on a teacher conference countdown. Thanks so much!!
How to change the names under the numbers in DIVI 4?
as found on https://divibooster.com/change-the-divi-countdown-timer-labels/ – works with latest Divi
is it possible to remove the days only? Please how can I do it? Thanks.
yes, but would get confusing i think…
.et_pb_countdown_timer .section.days,
.et_pb_countdown_timer .sep {
display:none;
}
Hey Craig,
I tried to copy the code into the custom CSS but i get an error saying “Rebrace” and “unexpected {“, has this ever occured before?
Thank you in advance!
Theresa
what are you adding, and where? the CSS should work in the theme options CSS box
the jQuery needs to go into a code module