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):

// animate counter boxes
jQuery.fn.fusion_box_counting = function() {
    var count_value = jQuery( this ).data( 'value' );
    var count_direction = jQuery( this ).data( 'direction' );

    if( count_direction == 'down' ) {
        jQuery(this).countTo( { from: count_value, to: 0, refreshInterval: 10, speed: 1000 } );
    } else {
        jQuery(this).countTo( { from: 0, to: count_value, refreshInterval: 10, speed: 1000 } );

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

jQuery(this).countTo( { from: 0, to: count_value, refreshInterval: 10, speed: 1000 } );

(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):

jQuery(this).countTo( { from: 0, to: count_value, refreshInterval: 10, speed: 1000, 
  formatter: function(v, o) { return Math.round(v).toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); } } );

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

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