CabGrid is designed to display journey prices with the least effort from the customer. This means certain information is not available when the price is initially calculated. For example, the date and, in-particular, the time of day, are unknown.
Because of this, Price Variation buttons are provided as a means of allowing the customer to select the correct price rate for their journey. However, not every customer notices or chooses the correct rate.
Whilst CabGrid cannot [currently] automatically update the price based on booking form input, there are steps you can take to insure customers choose the correct price before booking:
1. Add a pre-book message telling customers they must select the correct price option
2. Move the price variation buttons so they are immediately above the book button
How this is implemented would depend on the theme and plugin styling already in place, but here is a basic example:
.cabGridPro {display: flex; flex-direction:column;}
.cabGridPro .cabGridVariation {order: 2;}
.cabGridPro .cabGridProPrice {order: 3;}
3. Add your most expensive prices as standard
Customers are more likely to notice or click the buttons when the price is reduced. Use this option in combination with a custom pre-book message to highlight discounted pricing further.
4. Add a mandatory custom checkbox to the booking form
The booking form field could look like this:
I have selected the correct price option for my journey:CB:Y:y
To keep the price variation buttons in view after the book button is clicked, some custom CSS may be required. For example:
.cabGridVariation.cabGridProOff {display: flex !important;}
5. Hook into the date picker change event
When the date or time is changed, a JavaScript event is triggered. You can hook into this event to run your own function to modify the price. For more information see Flatpickr docs.
This requires some programming knowledge. We are available to hire for help with this if necessary.
Note, on some mobile devices, the native date picker is used. You will need to hook into a separate onChange event for this, in addition to the date picker.