🎁 Get Up To 70% Off During Divi Summer Sale! Get Divi

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

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.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

0 Comments

Submit a Comment

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

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!