Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1313320

    We’d like to track fundraising using the progress bar. Can we turn the percentage into real numbers (dollars)? I couldn’t find anything on the forums. I know there are other plugins if not.

    Thanks!
    Daniel

    #1313716

    Hey Daniel,
    Thank you for your patience, there is not a built-in way to do this, but you could try this approach.
    In this example we will change the Minimal Progress Bar from percentages to dollar values using a script, first we will add the custom ID dollar-example to the element
    progress_bar_dollar_example_custom_id.png
    Set your percentages to how far you want them to show, you can calculate your goal or just guess, this is only for looks.
    progress_bar_dollar_example_bars.png
    Then add this css to your Quick CSS, it will add the dollar symbol to the values

    #dollar-example .avia-progress-bar .progressbar-percent .av-bar-counter:before {
      content: "$";
    }
    

    Then add this script to the end of your functions.php file in Appearance > Editor:

    function custom_progressbar_script() { ?>
        <script>
    (function($){
      $(document).ready(function(){
        $("#dollar-example .avia-progress-bar .progressbar-percent").contents().filter(function(){ return this.nodeType == 3; }).remove();
        $("#dollar-example .avia-progress-bar:nth-child(1) .progressbar-percent .av-bar-counter").attr('data-number', 50000);
        $("#dollar-example .avia-progress-bar:nth-child(2) .progressbar-percent .av-bar-counter").attr('data-number', 45500);
        $("#dollar-example .avia-progress-bar:nth-child(3) .progressbar-percent .av-bar-counter").attr('data-number', 39000);
        $("#dollar-example .avia-progress-bar:nth-child(4) .progressbar-percent .av-bar-counter").attr('data-number', 11500);
    });
    })(jQuery);
    </script>
        <?php
    }
    add_action('wp_footer', 'custom_progressbar_script');

    The first line of the script removes the percentage symbol, the next 4 lines replace the values of the 4 progress bars in the example. For this example $50,000 = 100%.
    You will need to manually change the values.
    The expected results
    progress_bar_dollar_example.png

    Best regards,
    Mike

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.