Countdown CSS Examples

Here’s a starting point for you apply your custom branding styles to your Checkout Countdown.

You can apply custom CSS to your site through the WordPress Customizer or via a child theme.

Shortcode CSS

The Checkout Countdown Shortcode [checkout_countdown] comes without any CSS styles by default. this allows any one to do integrate the shortcode into your theme or another notification bar plugin.

.checkout-countdown-shortcode {
 text-align: center;
 background: black;
 color: white;
 padding: 10px;
 width: 100%;
 display: inline-block;
}Code language: CSS (css)

Countdown Bar CSS

You can change the background and font color of the Countdown bar within the Checkout Countdown settings. If you require to further customize the look and feel of the Countdown Bar then you can use the below CSS.

.checkout-countdown-bar {
 text-align: left;
 padding: 15px 0;
 width: 100%;
 z-index: 9999;
}Code language: CSS (css)

WooCommerce Notice CSS

Checkout Countdown can use WooCommerce Notices on the cart & checkout page as well. You can target the Checkout Countdown in WooCommerce notices using the below CSS.

Please note that the notices will use your themes default styling. They match every WooCommerce notice on your site.

.checkout-countdown-notice {
 font-weight:800;
}Code language: CSS (css)

Loading Dots CSS

The loading dots are set to a greyish color that works well for dark and light backgrounds. We get it, you might want to relax your customers with a nice calming sky blue color instead.

.ccfwoo-loading-dots--dot {
 background-color: deepskyblue;
}Code language: CSS (css)

Is Counting CSS

It’s also possible to apply custom CSS styles to any of the countdown types while it’s counting. The class .checkout-countdown-is-counting is automatically applied once the countdown starts. This can be use for changing the color of the top bar to stand out more and create a sense of urgency.

The following CSS changes the background of the countdown when it’s counting.

.checkout-countdown-is-counting {
 background-color: red;
}Code language: CSS (css)

The following CSS applies the red background only to the Countdown Bar while counting.

checkout-countdown-bar.checkout-countdown-is-counting {
 background-color: red;
}Code language: CSS (css)