Title: Dynamically change the progress value
Last modified: August 31, 2016

---

# Dynamically change the progress value

 *  Resolved [amitramani](https://wordpress.org/support/users/amitramani/)
 * (@amitramani)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/dynamically-change-the-progress-value/)
 * I have been exploring the use of this plugin for an ecommerce (WooCommerce) Checkout
   application.
 * What I would like to do is to update the progress bar dynamically based on which
   sections of the Checkout form have been filled in.
 * Is there a way to achieve this with this plugin? I am assuming I will need some
   AJAX/jQuery code for this.
 * [https://wordpress.org/plugins/progress-bar/](https://wordpress.org/plugins/progress-bar/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/)
 * (@jazzs3quence)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/dynamically-change-the-progress-value/#post-7222159)
 * 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 ([http://css-tricks.com/css3-progress-bars/](http://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.
   🙂
 *  Thread Starter [amitramani](https://wordpress.org/support/users/amitramani/)
 * (@amitramani)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/dynamically-change-the-progress-value/#post-7222335)
 * 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 WordPress.org 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.
 *  Thread Starter [amitramani](https://wordpress.org/support/users/amitramani/)
 * (@amitramani)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/dynamically-change-the-progress-value/#post-7222341)
 * 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](https://gist.github.com/amitramani/4192ff2b4a8ec7230fa24b3fa0583991)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Dynamically change the progress value’ is closed to new replies.

 * ![](https://ps.w.org/progress-bar/assets/icon-256x256.png?rev=2909774)
 * [Progress Bar](https://wordpress.org/plugins/progress-bar/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/progress-bar/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/progress-bar/)
 * [Active Topics](https://wordpress.org/support/plugin/progress-bar/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/progress-bar/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/progress-bar/reviews/)

## Tags

 * [checkout](https://wordpress.org/support/topic-tag/checkout/)
 * [Ecommerce](https://wordpress.org/support/topic-tag/ecommerce/)

 * 3 replies
 * 2 participants
 * Last reply from: [amitramani](https://wordpress.org/support/users/amitramani/)
 * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/dynamically-change-the-progress-value/#post-7222341)
 * Status: resolved