If you’re working with the Divi WordPress Theme and you’re trying to change the % to $ to the number counter, there is a super simple workaround. With this tutorial, you can change the number counter % to $ in Divi. Kori Ashton will help walk you through the simple steps.
Hey you all, my name is Kori Ashton, and welcome to another WordPress Wednesday. Today’s tutorial is gonna teach you how to add in a dollar sign in front of the number counter of the Divi theme. If you’ve been struggling with trying to figure out how to do that I’m gonna show you right now in this quick six minute tutorial. You can either add a dollar sign before a number counter, or maybe even a plus sign after it. Let’s go check it out right now.
So by default, Divi allows you to add in a percent sign right, with just a quick little toggle. I’ll show you what that looks like. Let’s go ahead and enable the visual builder. What they don’t do, though, is they don’t allow us to easily allow us to add that dollar sign, or a plus sign afterward. And what I’m trying to do here is show three different stats. And this middle one needs to actually be a dollar amount, ’cause I’m talking about capital.
So coming in here and clicking on the gear icon, in the element section, of course, you can add that percentage sign right? Easily and quickly, toggle over you see the percent sign added in there. But I don’t want this to be a percent sign, I need this to be a dollar amount. So there’s a little bit of a work around.
Maybe someday Divi will add in a little toggle here to add a dollar sign, or add in a plus sign. Until then, we’ve got to do this little work around. Super quick, though. Click on the advanced tab while we’re already here. Let’s open up this CSS ID and Classes area. You’re gonna come into the second field here, the CSS Class, and I want you to write the word, or type the word, dollar. D-o-l-l-a-r, dollar, and then click the check mark. Perfect, now we’re gonna go ahead and open it up, and click save, if you know Divi, that’s how you do it.
Now that change is actually saved live to the website. The second step to doing this is just a little bit of CSS. So this right here is the CSS code I want you to copy and paste right now. I’ll put this in the tutorial step-by-step.
All you do is come over here and grab it. This is why you had to type in the word dollar into that CSS class area.
We want it to affect the percent value here, and we want to put in before the content a dollar sign. How simple is that, right? Super cool, you can put anything you want inside of this little area right here, and it will render it before our number.
Love this, okay let’s copy it on our clipboard, here we go. You need to jump into your dashboard, and you’re gonna go into appearance, and go to customize. In this area you want to open up the additional CSS box and go down to the last thing if you have anything at all, and paste in what you had on your clipboard just then. And check this out, you guys look at that right there. There’s that dollar sign already sitting in there. Now this is broken down here, because we’re in a responsive mode. But I’m gonna go ahead and publish it, and we’ll test it on the live site right here.
Let me exit the visual builder now, and it’s gonna refresh the page. And we should absolutely see it perfectly sitting there as a dollar sign number, there you go! Super easy, right? Well, what if we wanted to do one with a plus sign after the fact? This is my other website where I’ve got these stats running. This is built on Divi as well.
You’re gonna use the same thing except for before, we’re gonna change that word to after. And we’re gonna change dollar to plus. Now change the dollar sign to a plus sign, and let’s grab that onto our clipboard, and jump into this website. I’m gonna enable the visual builder. Exact same stuff, so you guys, super, super easy to do. Enable the builder, come down to the module you want to add the sign to, go into advanced, go into classes. And we’re gonna say plus, right, because that’s our code. Check the box and click save. If I’m going too quickly just pause and rewind me, it’s okay.
You can do that to all three of these if you like. You can add in that plus sign. Let’s go out and do it. Go here and say plus. And go here and say plus, ’cause we’re always growing. And save, in that last step we have it on our clipboard already, we’re gonna jump into our dashboard. We’re gonna go ahead and exit the visual builder, jump into our dashboard and go to customize, right, appearance, customize. Appearance, customize. And of course that area down at the very bottom, additional CSS, go all the way down to the bottom, enter in plus after content, put a plus sign, and click publish and let’s go see if it worked.
Let’s take a look right here, scroll down, and there’s our plus signs. Worked perfectly for us, nice, huh? So it’s that super easy, I hope this helps you. I have an entire playlist here dedicated to Divi. If you’re struggling through anything to do with that theme, be sure to check out my YouTube channel. Be sure to subscribe and like the video, because every week I’m creating content just like this, to help you improve your online marketing, inside the world of WordPress. All right, you all have a great rest of your week. I’ll see you next time, bye everyone.