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:

Price Variation Highlight

1. Add a pre-book message telling customers they must select the correct price option

When the price is displayed, it is possible to add an additional message that appears with the price and book button. Here, you could add a custom message drawing customers’ attention to the price variation buttons. You could go as far as stating, “incorrect journeys will be rejected“.

2. Move the price variation buttons so they are immediately above the book button

All aspects of the CabGrid Pro calculator interface can be controlled with CSS. This means the Price Variation Buttons can be repositioned. In this example we have moved the price variation buttons below the main input fields to make them more prominent.

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

Enter your most expensive prices – your night prices, for example – as the standard prices in the pricing table. Then, use the price variation buttons to reduce the price accordingly.

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

Ask your customers to confirm they have selected the correct price by adding a mandatory custom checkbox field to the booking form. This should draw further attention to the price variation buttons, but may require some additional CSS…

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.

Tags: ,

  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey