Im building e-commerce website on wordpress and I want to style woocommerce preorder countdown.
Countdown is created with jQuery Countdown by Keith Wood. What I need is to style only numbers: change their size and background. Im not familiar with Jquery and i dont know how to split text or something like this. Also, I dont know is that really possible.
<div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>
2
Answers
Here’s a vanilla-flavored solution that grabs the contents of the div, wraps each number is a styled span element, and overwrites the div contents with the new version.
You can choose your preferred size and color by changing the values of
sizeMultiplier
andbackground
variables. It’d be cleaner to use a CSS class to provide the formatting (and the script would just apply the CSS class) but I didn’t know how easy it would be for you to modify the CSS files.See the in-code comments for some further explanation.