Divi Countdown Timer: Hide First Number in Remaining Days

Last modified Sep 10, 2020
Difficulty Beginner
Language CSS
Category

The Divi Countdown Timer “Days” field has three zeros and no built-in option for changing or removing the field. In this guide, you will learn how to remove the leading zero in the Countdown module.

The Countdown Timer module adds an animated timer that counts down to a specific date that can be used for coming soon landing page, maintenance mode pages, and creating urgency on a sales page.

Follow these steps to remove an unnecessary leading zero from the day’s section.

Tutorial Requierments

  • Copy and Paste CSS Code Snippet – The code for this tutorial was created and tested by our design team.
  • Basic knowledge of how to add CSS to WordPress – If you are new to Divi follow this tutorial to learn how to add CSS to your site.

 

The code works as follows: first we catch the first character in the days section, and change the font size to 0px.

 

 

 

Even if the font size is 0 the text still has line-height. So we set vertical-align to top so it doesn’t affect the height of the section.

 

 

CSS

.et_pb_countdown_timer .section.days p.value:first-letter {    
font-size: 0px;   
vertical-align: top 
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.5.3 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

____

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, November 13, 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

19 Comments

  1. Cindy

    Thank you! Worked perfectly.

    Reply
  2. Moni

    Works like charm. (Divi 4.24.2)
    Thank you!

    Reply
  3. Stefan

    Still works with Divi 4.23.1
    Cause I don’t use countdown timer often, I put the CSS in the module CSS field.
    THANK YOU
    Stefan

    Reply
  4. Stacey Jessop

    Worked perfect thank you!

    Reply
  5. Jeannie

    This still works great. Thank you!

    Reply
  6. Bill

    It worked for me. Thanks!

    Reply
  7. jeason

    Thanks Anna Kurowska, your message also helped me a lot ! Thanks

    Reply
  8. antoine avril

    Works like a charm, thanks a lot!

    Reply
  9. Anna

    Another solution would be to add this code under Theme Options / Integration / area:

    jQuery(function($){
    	
    	var olddays = $('.et_pb_countdown_timer .days .value');
    	
    	olddays.each(function(){
    		var oldday = $(this);
    		oldday.after(oldday.clone());
    		oldday.next().wrap('');
    	}).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);
    	})()
    
    });
    

    🙂 Kind regards!

    Reply
    • Christian

      Hi Ana, this jQuery JS worked fine for years, but it slowed down loading of the countdown (in my case). The days were loaded 1-2 seconds after all other values. So today (2024-05-06) I actually looked for PHP code that could solve this problem, but found this tiny little piece of CSS that gets the work done without any delay in loading. Love it! Tested with Divi version 4.25 ( updated 04-18-2024 ).

  10. Alex

    It doesn’t seem to work on phones (iPhones specifically, haven’t tested on Androids) – only on desktop.

    I inserted the CSS code on the Custom CSS Box in the Divi Theme Options dashboard.

    Any advice?

    Reply
    • <div class="apbct-real-user-wrapper">
    <div class="apbct-real-user-author-name">Anna Kurowska</div>
    <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_529729');" onmouseout="apbctRealUserBadgeClosePopup(event);">
        <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;">
        <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_529729">
            <div class="apbct-real-user-title">
                <p class="apbct-real-user-popup-header">The Real Person!</p>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
                </div>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_529729">
        <div class="apbct-real-user-title">
            <p class="apbct-real-user-popup-header">The Real Person!</p>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
            </div>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
            </div>
        </div>
    </div>
</div>

      Hi Alex, I just tested CSS and it worked on the iPhone for me. Please make sure CSS is added and if it doesn’t work, share a link to your page.

  11. Yitshak KALFON

    still works – thanks

    Reply
  12. Ando

    Hi, I dropped that bit of CSS into, Countdown Timer Settings > Advanced > Main Element … and received a couple of errors.

    The first error comes right after the first curly bracket and says: Expected RBRACE.
    The second error comes right after the last curly bracket and says: Unexpected token’}’.

    Any help much appreciated!

    Reply
    • <div class="apbct-real-user-wrapper">
    <div class="apbct-real-user-author-name">Anna Kurowska</div>
    <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_497692');" onmouseout="apbctRealUserBadgeClosePopup(event);">
        <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;">
        <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_497692">
            <div class="apbct-real-user-title">
                <p class="apbct-real-user-popup-header">The Real Person!</p>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
                </div>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_497692">
        <div class="apbct-real-user-title">
            <p class="apbct-real-user-popup-header">The Real Person!</p>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
            </div>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
            </div>
        </div>
    </div>
</div>

      Hi Ando, that’s because you are adding the CSS to the module, it won’t work in that case.
      Try adding CSS to Custom CSS Box in the Divi Theme Options dashboard, Divi Builder Page Settings of an individual page or Divi child theme style.css file. You can find more info about adding CSS here: https://wpzone.co/tutorials/5-ways-to-add-css-to-divi/

  13. Christian Mauerer

    WORKS fine but NOT in firefox

    Reply
  14. Christopher

    Yes it still works & that was easy, thank you!

    Reply
  15. Beth

    Thank you!! =)

    Reply

Submit a Comment

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

Next snippet Create Call to Action Button Below Mobile Hamburger Menu
Previous snippet Divi Mobile: Collapse Submenus With Clickable Parent Menu Items