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.

Divi countdown 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

hide countdown seconds

.et_pb_countdown_timer .section.seconds,
.et_pb_countdown_timer .sep {
display:none;
}

Remove countdown minutes and seconds numbers and titles

hide countdown seconds +minutes

.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

hide countdown seconds +minutes + hours

.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>

 

5 3 votes
Article Rating