How to Change Number Counter % Sign to Dollar in Divi?

Sep 10, 2021 | Blog, Divi Tutorial | 0 comments

Do you want to change the % sign to $ in the Number Counter module in Divi theme?

In this article you will find step by step instructions to change the percentage sign to a dollar sign in the number counter module.

Number Counter Dollar Sign

There are no default options to change the % sign in the Number Counter module. However we can change it with a snippet of CSS Code.

1. Add CSS Class to Change % in Number Counter Module

The first step is to add a CSS Class to the Number Counter module. Adding the CSS Class ensures that our CSS Code does not affect any other elements on the website.

Go to the Number Counter Module Settings > Advanced > CSS ID & Classes > CSS Class and then add the class lwp-counter-sign.

Please check the screenshot below if you are not sure where to add the CSS Class in module settings.

Number Counter settings CSS Class for changing to dollar sign

2. Add CSS Code in Divi Theme Options

Next all you have to do is to add the CSS Code to change the percentage sign to the Divi Theme Options.

Go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and then add the following CSS code.

.lwp-counter-sign .percent .percent-value:before {
    content: '$';
    display: inline-block;
}

.lwp-counter-sign span.percent-sign {
    display: none;
}

If you are not sure where to add the code then please check the screenshot below.

Divi Theme Options Custom CSS

Once you have added the CSS Class to the Module and the CSS Code to Theme Options you will see a dollar sign in the number counter module

To change the sign to something other than a dollar sign you just have to change the ‘$’ value in the CSS code on Line 2

3. Adding Icon or Text After the Counter

If you would like to change the percentage sign or add some text after the number counter then you can use the following CSS Code.

.lwp-counter-sign .percent .percent-value:after {
    content: '$';
    display: inline-block;
}

.lwp-counter-sign span.percent-sign {
    display: none;
}

This will add the dollar sign after the number counter. Below is a screenshot of how the number counter looks after adding the code.

Number Counter dollar sign added after number

To change the dollar sign all you have to do is update the Line 2 in the code.

The content you add does not need to be one letter. You can add a word or even a sentence as content.

For example you can add the word ‘Jobs’ on Line 2 in the code.

.lwp-counter-sign .percent .percent-value:after {
    content: 'Jobs';
    display: inline-block;
    margin-left:20px;
}

.lwp-counter-sign span.percent-sign {
    display: none;
}

Here is a preview of how Number Counter looks with the CSS Code.

Divi Number Counter custom text added after number

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

Here are some more Divi tutorials that you can check next.

You can find a complete list of all the help articles related to Divi on the Divi Tutorials page.

0 Comments

Submit a Comment

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

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month