Add a progress indicator to the TourCMS Booking Engine
It is fairly common on transactional websites to provide an indication of how far the customer is through the process. The standard TourCMS booking engine provides for this with the Step X of 5 text which is configurable at each step.
Some prefer a more detailed progress indicator showing the steps that are still to come (see the screenshot below), luckily this can be achieved with a little custom HTML and CSS.
The part we are going to reproduce in this tutorial is the top section which reads "Step 1: Product Step 2: Extras....." with an indicator that highlights the current step.
- For Tours/Hotels that do not have any Options available Step 2 is skipped, yet Step 2 will still be shown in the progress indicator. If none of your Tours/Hotels contain Options you could remove Step 2 from the custom HTML.
- Any images you reference in your custom HTML/CSS should be served via https, for more information see the note at the bottom of this page