By default, the Number Counter module in Divi has the option to either display a number with a percent sign or just the number on its own. There is no option to change the % sign to anything else within the module settings.
We can swap the % sign for a $ sign by turning the % sign off in the module settings and adding a class to the module. This CSS class can then be used by targeting it with custom CSS styling we will add into the site. The code we use will target any module with the class dollar and then more specifically it will target the percent-value and add some content (the $) in from of it using the before CSS code.
%
This is the default number counter
Number counter with $ on the left
How to change the % sign to a $ sign
This tutorial requires you to add CSS code to your Divi website. If you haven’t done this before, then you can read our guide on how to add custom CSS in Divi.
To change the percentage (%) sign in your Divi Number counter module to a dollar ($) sign you will need to;
- Add a Numer Counter Module into your page.
- In the Number Counter Settings go to Content > Elements and set the Percentage Sign to OFF.
- In the Number Counter Settings go to Advanced > CSS ID & CLasses and set a CSS Class of dollar
- Add the following custom CSS to Divi Theme options custom CSS box, your page settings Custom CSS box or your style.css in your child theme;
.dollar .percent-value:before { content:'$';}
Hi There, is there any way to change it just fer certain instances, I need to be able to show animated numbers, percentages and South African Rands (R).
Any ideas?
Perfect. Been searching also a way to add icon to the Divi Counter Module. Any idea how we can do that?
Very helpful! I needed to add a + sign instead of the $ that you have in your example. I was able to add it, however,It is on the left of the number, how do I move it to the right of the number? Thx!
Please disregard my question, I replaced”before” with “after” and it worked perfectly. Thanks for this helpful post!
Thank you so much for this bit of CSS. It worked a perfectly.
Thanks so much! Works perfectly!
Still works like a charm!
Thank you very much!!
This was so easy! Thank you!
In which CSS section do I add this code to?
Also, it is showing:
“expected RBRACE”
“unexpected token ‘}'”
I simply copied and pasted.
I am trying to change the % to #.
Nobody to help Caroline (and me)?
you need to put CSS to admin dashboard > Divi > Theme Option, scroll to bellow, put it inside Custom CSS
Next (possibly a feature request?) would be a question for number formatting, e.g. a thousands separator. Has anyone done this yet?
Worked a treat! thank you for sharing.
Love it and thank you so much for publishing this amazing tip!! I also love that it can be set on a page-by-page basis rather than site-wide. Definitely owe you a coffee 🙂
Great tip and easy to do! Thanks.
Thank you!
Brilliant!
This is very powerful, and expandable. I quickly added this little diddy, e.g. :
/* — dollar signs on counters — */
.dollar .percent-value:before { content:’$’;}
/* — + signs on counters — */
.plus .percent-value:after { content:’+’;}
/* — both $ + — */
.dollar-plus .percent-value:after { content:’+’;}
.dollar-plus .percent-value:before { content:’$’;}
Now I’m trying to figure out how to add commas to really big numbers…
Thank you so much!
Thank you so much
I need it to countdown from 1000 to 500. How would I do that?
not possible with the built in module, but maby with another countdown WP plugin
Wrote my own code. Thanks. You’d think they’d make it go either way.
Nice and easy 👍
Big Thank You
Hello and thanks for the good explenation.
Have a question.
The Circle shows full at 100.
How can i change that the Circle shows full at 60 ?
Because of 60 seconds, i want to change the 0-100 to 0-60 for a full circle.
Looking Forward to hear of any .css costumation?