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;

  1. Add a Numer Counter Module into your page.
  2. In the Number Counter Settings go to Content > Elements and set the Percentage Sign to OFF.
  3. In the Number Counter Settings go to Advanced > CSS ID & CLasses and set a CSS Class of dollar
  4. 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:'$';}

divi number counter percent to dollar

 

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close