Avada: adding a thousands separator

The Avada theme by Theme Fusion has a sales pitch: “Our #1 priority is you, the user. We believe in our product and hold ourselves to the highest standards. We truly care about your site as much as you do, which is why we offer amazing support at our dedicated support center. In addition, we offer free […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

The Avada theme by Theme Fusion has a sales pitch: “Our #1 priority is you, the user. We believe in our product and hold ourselves to the highest standards. We truly care about your site as much as you do, which is why we offer amazing support at our dedicated support center. In addition, we offer free updates with new features requested by our users. You can count on us.”

Nevertheless, there’s a feature request that they won’t implement, and funnily enough it’s to do with counting: the possibility to add a thousands separator to the values appearing in Fusion’s counter boxes. Large numbers without thousands separator become quite hard to read, so the feature’s been requested several times (here and here). However, Theme Fusion won’t implement this, saying “We don’t have an option in the shortcode for this. I tried coming up with some code that’ll help with this but no luck as it’s taking too long – we can assist with minor tweaks only. Sorry.” Tech support does go on to provide some hints as to how this feature should be implemented, but that’s where things go wrong.

They point developers to a PHP file: “You’ll have to modify the core shortcodes.php file in your wp-content -> plugins -> fusion-core folder.
in shortcodes.php there, search for the line “function shortcode_counter_box” without quotes, it should take you the start of the block of code that you need to modify.”, but it’s clear that the code that updates the number animation doesn’t live in PHP at all. It’s JavaScript, and it lives somewhere else.

In the file /themes/adava/js/main.js , you’ll find the following code (lines 846-856 in my version):

The key bit we’re interested in is the line:

(This is the line for counting down. There’s one for counting up, too. You should change that also if you use that feature.)

This code uses a 3rd-party plugin for jQuery named “jQuery-countTo”, which can be found on GitHub. The plugin documentation tells us that the countTo method takes an options object (which in the code above has members from , to , count_value , refreshInterval  and speed ). There’s an additional option we can provide, which is formatter . This is a function with two arguments: value  (the numeric value to display) and options , which we won’t need. The function is responsible for converting the value to a string.

In order to convert to a string with decimal separators, we can use a lovely regular expression (found on StackOverflow):

… and voilá, your animated numbers now contain thousands separators.

Now if only Theme Fusion would turn this into a little checkbox in their FusionBuilder.

Save

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">