Dynamically change the progress value

It’s possible. You’d want to use a do_shortcode in your code and pass a variable (either via PHP or javascript) into the shortcode to change the bar. I haven’t explored the idea of doing it purely with javascript before (you’ll need to basically hack the CSS that renders the bar) but a PHP solution would look something like this:

$progress = 50; // This is your variable that you want to be dynamic. This would be fed from some other part of your site.

echo do_shortcode( '[wppb progress=' . $progress . ' location=inside]' );

If you’re doing it purely with CSS, you wouldn’t need the do_shortcode, you’d just need to find the right CSS selector to hijack the bar, probably something like jQuery( 'div.wppb-progress > span' ). The bars are using the same code shown in this tutorial (https://css-tricks.com/css3-progress-bars/) so you can cross-reference your js with that tutorial.

Hope that helps! Let me know what you figure out! I’d love to see the result. ??

Hi Chris
With your help and a bit of experimentation with jQuery code, I am able to get the desired functionalit,y, i.e. the Progress Bar live updates as the Checkout fields are validated.

I would really like to release this code to the www.ads-software.com repository. Essentially, it is a few lines of PHP code (in functions.php) and 1 JS file.

What do you suggest? I was thinking of making this as a plugin. I know lots of other people (that do not wish to buy the commercial plugins) would benefit from it.

Here is the code I added to get the Progress Bar working with Woocommerce as a Checkout Progress Bar.
https://gist.github.com/amitramani/4192ff2b4a8ec7230fa24b3fa0583991