WooCommerce Checkout Progress Bar in Action

[WooCommerce] Checkout Progress Bar

As you read articles/posts on ecommerce optimization, specifically checkout optimization, a popular theme emerges: The Checkout Progress Bar. The idea is to provide your visitors some kind of visual feedback that they are making progress. It tells them how far along they are before the purchase is complete. Conversely, it tells them how much longer before they can own the product/service they are vying for.

With this in mind, I googled for a free plugin that would accomplish just that. My search ended fruitless (almost). I did hit this gem of a plugin called Progress Bar. This is a simple plugin that can be used anywhere on a WordPress site.

Steps

In this article, my aim is to create your own customized checkout progress bar without the use of any paid plugins. You will need

  • Download the Progress Bar plugin from the WordPress plugin repository
  • Make some code changes (PHP and JS included). Download from github.

The code changes are shown below. The first change is in your theme/child theme’s functions.php file. Two things are happening here:

  1. Hooking into the “woocommerce_checkout_before_customer_details” action hook to display the Progress Bar. We use the shortcode for the Progress Bar because it allows to send in parameters for styling and appearance.
  2. Loading the JavaScript file that will manipulate the Progress Bar based on how much of the Checkout Form has been validated.

The second file is the JS script that checks in real-time which mandatory fields have been validated. Then it calculates the progress (in pixels) by simply dividing the “number of fields validated” by the “number of fields that require validation”. It also accounts for the “Shipping Address Same as Billing Address” checkbox.


The end result is you get a progress bar for your WooCommerce Checkout Page.

WooCommerce Checkout  Progress Bar in Action
WooCommerce Checkout Progress Bar in Action

Notes on Customization

The CSS for the progress bar can be easily customized. Follow the instructions on this link. Also, note that the plugin has quite a few options that can be used for customizing the look and feel of the Progress Bar.


Posted

in

, , ,

by

Comments

8 responses to “[WooCommerce] Checkout Progress Bar”

  1. John d. Avatar
    John d.

    Hi

    thank you so much for this awesome plugin. I used this tutorial as you said, and a nice looking progress bar appeard in my checkout page. but the problem is, it doesn’t validate the input data and always stays at 50 percent. so what can I do to solve this ?

    1. Amit Ramani Avatar

      Hi John
      Can you please provide the URL for your checkout page? I can check to see if there are any JS errors.

      1. John d. Avatar
        John d.

        Hi Amit
        This is my checkout page :
        http://kelidefarda.ir/checkout

        1. Amit Ramani Avatar

          Hi JOhn
          The reason it does not work is because the JS file that moves the bar is missing! You have to create a file called “wc-checkout-progress-bar.js” inside the theme’s “js” folder. Please create this file (see https://gist.githubusercontent.com/amitramani/4192ff2b4a8ec7230fa24b3fa0583991/raw/61cdba5faf0c1987a219caceceb505a82d6743b2/wc-checkout-progress-bar.js) and then retry.
          Currently, that file is not being loaded. Console Error:
          Failed to load resource: the server responded with a status of 404 (Not Found) http://kelidefarda.ir/wp-content/themes/enfold-child/js/wc-checkout-progress-bar.js?ver=1.0.0

          1. John d. Avatar
            John d.

            hi Amit
            Yeah thats right
            at first, I created the js file in the main theme’s folder but now I realized that it had to be in the child theme’s folder and its working like a charm!
            thank you so much for your help and for this great website

          2. Amit Ramani Avatar

            I just tested your site with the changes. It looks great. Glad I was able to help! Let me know if that progress bar helps in increasing the conversion rate!

  2. perdana Avatar
    perdana

    thank you…it’s work with my website.

    1. Amit Ramani Avatar

      Glad to hear that it worked for you as well!

Leave a Reply

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