Styling Demos

The following examples show how the appearance of the Cab Grid price calculator can be changed using CSS styling. These examples make use of the Cab Grid Pro shortcode’s class attribute enabling each to be targeted and styled independently.

Custom CSS code can be entered in the ‘CSS Styling‘ box under the OPTIONS tab on the Cab Grid page of a site’s WordPress admin. For more information on adding custom styling to your taxi fare price calculator, see our support article: How to customise your price calculator’s appearance with CSS and check out the Custom Style Builder.

Styles for Earlier Versions of Cab Grid Pro

Cab Grid Pro allows the base stylesheet to be selected under the OPTIONS tab. The styles on this page are based on the default Cab Grid Pro v5 styles. Styling examples for Cab Grid Pro versions 1 to 4 can be found on a separate page.

  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey

Above is a full-width styling example.

To create this, the Cab Grid shortcode is given a CLASS attribute: v5-fullWidth.

From here we can specifically target this instance of the Cab Grid Pro plugin and apply dedicated styles….

Shortcode syntax:

[cabGridPro icons="light" class="v5-fullWidth"]

Custom CSS (entered in CabGrid Pro Options tab):

.cabGridPro.v5-fullWidth {background:transparent;}
.cabGridPro.v5-fullWidth:after {display:none;}

Need a Hand?

Hire Us!
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey

Vehicle Layout

This demo shows the vehicle select option with a transparent background over a full width image. The background image is specified by the parent element (part of the WordPress theme).

CSS Syntax

The Cab Grid shortcode is assigned a CLASS attribute as ‘v5-transVehicle’
.cabGridPro.v5-transVehicle {background:transparent;}
.cabGridPro.v5-transVehicle:after {background:none;}
.cabGridPro.v5-transVehicle .cabGridForm ul.cabGridProJourneyDetails li.cabGridProVehicles ul>li {border-color: #8e8e8e;background: rgba(72, 72, 72, 0.64);background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%,rgba(36,36,36,0.5) 20%,rgba(41, 41, 41, 0.8) 50%,rgba(36,36,36,0.5) 80%,rgba(0, 0, 0, 0.15) 100%);box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.39);}
.cabGridPro.v5-transVehicle .cabGridForm ul.cabGridProJourneyDetails li.cabGridProVehicles ul>li label span.cabGridProVehicleImgCont {background: rgba(0,0,0,0.3);background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0.5) 85%,rgba(0,0,0,0) 100%);}
.cabGridPro.v5-transVehicle .cabGridForm ul.cabGridProJourneyDetails li.cabGridProFromSelect .cabGridProPickSelect, .cabGridPro.v5-transVehicle .cabGridForm ul.cabGridProJourneyDetails li.cabGridProToSelect .cabGridProDropSelect {background: rgba(31, 31, 31, 0.62);}
.cabGridPro.v5-transVehicle .cabGridProPrice .cabGridProPriceDigCont,.cabGridPro.v5-transVehicle form ul.cabGridProBookDetails {background: rgba(31,31,31,0.7);border-radius: 8px;border: 1px solid #8e8e8e;padding: 20px !important; width: calc(100% - 40px);margin: 0 auto 20px;}

Shortcode syntax:

[cabGridPro layout="vehicle" class="v5-transVehicle"]

Shortcode syntax:

[cabGridPro icons="light" class="v5-GreenSquared"]


.cabGridPro.v5-GreenSquared {color: #f7f7f7;background: rgb(118,173,61);border-radius: 0px;border-bottom: 10px solid rgb(109, 214, 90);box-shadow: 0px 0px 20px rgba(31, 31, 31, 0.14);}
.cabGridPro.v5-GreenSquared:after {display:none;}
.cabGridPro.v5-GreenSquared .cabGridProBookDetails input:not([type=submit]), .cabGridPro.v5-GreenSquared .cabGridProBookDetails textarea, .cabGridPro.v5-GreenSquared li.cabGridProChosenLI, .cabGridPro.v5-GreenSquared li.cabGridProLuggage, .cabGridPro.v5-GreenSquared li.cabGridProLuggageOn, .cabGridPro.v5-GreenSquared li.cabGridProPassengers, .cabGridPro.v5-GreenSquared li.cabGridProTickets, .cabGridPro.v5-GreenSquared li.cabGridProTime, .cabGridPro.v5-GreenSquared li.cabGridProVehicles ul>li, .cabGridPro.v5-GreenSquared.cgpMobileN .cgpCont-telephone {background: transparent;border: 1px solid #6dd65a;border-radius: 0;}

Green Squared Layout

The Cab Grid shortcode is assigned a CLASS attribute: ‘v5-GreenSquared‘. Any instance of the Cab Grid taxi price calculator with this class assigned will acquire this styling.

  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey

“Transfers” Theme Layout

Another full width demo with some slightly different features, includes hiding the luggage box and replacing the return icon with a custom tick-box.

Shortcode syntax:

[cabGridPro class="cgp-Transfers"]

Custom CSS (entered in CabGrid Pro Options tab)

.cabGridPro.v5-Transfers * {font-size:17px;}
.cabGridPro.v5-Transfers {background:transparent;color:#fff !important;text-transform:uppercase !important;font-size:16px;max-width: 1370px !important;width:100% !important;margin: 0 auto;padding: 5px;min-height: 300px;}
.cabGridPro.v5-Transfers:after,.cabGridPro.v5-Transfers .tooltip {display: none;}
.cabGridPro.v5-Transfers h1 {color:#fff !important;border: none; border-radius: 0;background-color: transparent;box-shadow: none;text-shadow: 0px 0px 1px #7d7d7d;margin:0;padding:0;}
/*Hide Luggage*/
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProLuggage,.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProSwapDests,.cabGridPro.v5-Transfers .cabGridProFlagCont {display:none !important;}
/*Journey Details General*/
.cabGridPro.v5-Transfers.cabGridProWide form.cabGridForm {margin-bottom:70px;}
.cabGridPro.v5-Transfers .cabGridForm ul.cabGridProJourneyDetails { align-items: stretch; }
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails > li {background-color: transparent;background: transparent;border: none;margin: 0 0.5em;padding: 0;}
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails > li label {text-indent:0 !important;background-image:none !important;text-transform:uppercase !important;display:block !important;float:none !important;font-size:18px !important;padding: 0 1px 0 3px !important;text-align: left;margin: 0 !important;color:#fff;line-height: 1;height:auto;}
.cabGridPro.v5-Transfers .cabGridForm ul.cabGridProJourneyDetails>li>input, .cabGridPro.v5-Transfers .cabGridForm ul.cabGridProJourneyDetails>li>input[type=number] {display: block;height:47px;line-height:47px;padding: 0 12px;font-size: 15px;width: 100%;border: 1px solid #DFDFD0;color: #191F26;border-radius: 3px;background-image:none;background-color:#fff;}
/*Return Box*/
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect {width:12%;height:auto;color:#fff;background-image:none;min-height:70px;position:relative;min-width:95px;max-width:125px;}
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {border:none;min-width:80px;text-indent:0;}
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect input {padding:0;margin:0;width:auto;height:auto;display:none;}
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:after {text-indent:0px;position: absolute;content:'\002714';display:block;width:calc(100% - 0.5em);height:45px;line-height:45px;background-color:#fff;margin:0;padding:0;text-align: center;font-size:18px;border-radius: 3px;border: 1px solid #DFDFD0;}
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:after {color: #000;}
/*TO/FROM boxes (general)*/
.cabGridPro.v5-Transfers .chosen-container-single .chosen-single {border-radius: 3px;background-color:#fff;text-transform:uppercase;box-shadow: none;padding:14px 0 14px 38px;margin:0;}
.cabGridPro.v5-Transfers .chosen-container .chosen-drop {box-shadow:none;}
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li input.chosen-search-input {height:auto;padding:4px;line-height:1.2;}
.cabGridPro.v5-Transfers .cabGridProJourneyDetails .chosen-container .chosen-results {padding-right: 13px!important; text-align: right; background: rgba(20,5,45,0.95);color: #fff; text-transform: uppercase;}
.cabGridPro.v5-Transfers.cgpMobileY .cabGridForm ul.cabGridProJourneyDetails li.cabGridProChosenLI {width:100%;}
/*FROM box*/
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProFromSelect {width:30%;max-width:358px;min-width:120px;}
/*FROM box*/
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProToSelect {width:30%;max-width:358px;min-width:120px;}
.cabGridPro.v5-Transfers .cabGridProPrice,.cabGridPro.v5-Transfers .cabGridProPrice * {color:#fff;}
.cabGridPro.v5-Transfers .cabGridProMessage,.cabGridPro.v5-Transfers .cabGridProPriceDigCont .cabGridProRtnMsg {color:#fff;}
.cabGridPro.v5-Transfers form ul li input[type="submit"],.cabGridPro.v5-Transfers .cabGridProPrice .cabGridProBookButton,.cabGridPro.v5-Transfers .cabGridProPayButton {font-size:18px !important;font-weight:bold;box-shadow:none;border: none;text-transform: uppercase;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: #fff !important;text-align: center;background: #191F26 !important;height: 54px;line-height: 54px;padding: 0 14px !important;text-shadow: none;transition:all 0.8s ease;}
.cabGridPro.v5-Transfers form ul li input[type="submit"]:hover,.cabGridPro.v5-Transfers .cabGridProPrice .cabGridProBookButton:hover,.cabGridPro.v5-Transfers .cabGridProPayButton:hover {background:#fff !important;color:#191F26 !important;}
.cabGridPro.v5-Transfers.cabGridProWide .cabGridVariation {position: absolute;top: 80px;padding: 0 20%;}
.cabGridPro.v5-Transfers.cabGridProWide .cabGridVariation a {margin: 0.5em;border-radius: 4px;background: #fff !important;color: #4e4e4e;}
.cabGridPro.v5-Transfers.cabGridProWide .cabGridVariation {color:#1d1d1d;box-shadow: inset 2px 2px 3px 1px rgba(0, 0, 0, 0.33);text-shadow: 0px 1px 1px rgba(80, 77, 77, 0.23);}
.cabGridPro.v5-Transfers.cgpMobileY .cabGridVariation {margin-bottom:20px;}
.cabGridPro.v5-Transfers.cgpMobileY .cabGridVariation a {margin: 0.5em;border-radius: 4px;padding: 14px 0;min-width: 27%;font-size: 12px;}
.cabGridPro.v5-Transfers form ul.cabGridProBookDetails {color:#fff;border:none;margin:2% auto;max-width:992px;background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.18) 0%, rgba(3,3,3,0.18) 1%, rgba(39,39,39,0.15) 15%, rgba(166,166,166,0) 65%, rgba(255,255,255,0) 100%);background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.18) 0%,rgba(3,3,3,0.18) 1%,rgba(39,39,39,0.15) 15%,rgba(166,166,166,0) 65%,rgba(255,255,255,0) 100%);background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%,rgba(3,3,3,0.18) 1%,rgba(39,39,39,0.15) 15%,rgba(166,166,166,0) 65%,rgba(255,255,255,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e000000', endColorstr='#00ffffff',GradientType=1 );}
.cabGridPro.v5-Transfers form ul.cabGridProBookDetails li label, .cabGridPro.v5-Transfers form ul.cabGridProBookDetails legend {color:#fff;}
.cabGridPro.v5-Transfers form ul.cabGridProBookDetails .cgpCont-telephone {background:#fff;}
.cabGridPro.v5-Transfers form ul.cabGridProBookDetails li textarea, .cabGridPro.v5-Transfers form ul.cabGridProBookDetails li input {background:#fff;border-radius:4px;height:auto;font-size:inherit;}
.cabGridPro.v5-Transfers form ul.cabGridProBookDetails li input {padding: 14px 0 14px 8px;}
.cabGridPro.v5-Transfers form ul.cabGridProBookDetails li label {text-transform:uppercase;}
.cabGridPro.v5-Transfers .cabGridProExtras * {color:#fff;}
.cabGridPro.v5-Transfers .cabGridForm ul.cabGridProBookDetails li.cabGridProExtras ul>li input.cabGridProExtraQuantity {background: transparent;font-size: 32px;background-color: transparent;padding: 0px 0 0 18px;margin: 0;border: none;width: 54px;text-align: center;}
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProOff {display:none;}

  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey

Sunset Layout

The Cab Grid shortcode is assigned a class named, ‘v5-sunset


/*SUNSET v5*/
.cabGridPro.v5-sunset * {color:red;}
.cabGridPro.v5-sunset fieldset,.cabGridPro.v5-sunset .cabGridForm ul.cabGridProBookDetails li.cabGridProExtras ul>li,.cabGridPro.v5-sunset .cabGridForm ul.cabGridProBookDetails li.cabGridProExtras ul>li h3 {border-color: red;}
.cabGridPro.v5-sunset ::placeholder {color:#ffe000;font-style: italic;}
.cabGridPro.v5-sunset,.cabGridPro.v5-sunset .chosen-container-single .chosen-drop {font-family:Calabri,Verdana,"Helvetica Neue",Trebuchet,"Trebuchet MS",Helvetica,Arial,sans-serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);padding-bottom:40px;border-radius: 10px;background: #f9d241;background: -moz-linear-gradient(top, #f9d241 0%, #f5b62d 100%);background: -webkit-linear-gradient(top, #f9d241 0%,#f5b62d 100%);background: linear-gradient(to bottom, #f9d241 0%,#f5b62d 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d241', endColorstr='#f5b62d',GradientType=0 );color: #ff7600;}
.cabGridPro.v5-sunset .chosen-container .chosen-results::-webkit-scrollbar {width: 8px;}
.cabGridPro.v5-sunset .chosen-container .chosen-results::-webkit-scrollbar-track {border-radius: 10px;background-color:transparent;box-shadow:none;}
.cabGridPro.v5-sunset .chosen-container .chosen-results::-webkit-scrollbar-thumb {border-radius: 10px;background-color:rgba(0,0,255,0.5);}
.cabGridPro.v5-sunset .chosen-container .chosen-results li {color:red;}
.cabGridPro.v5-sunset .chosen-container-single .chosen-single span,.cabGridPro.v5-sunset .cabGridForm ul.cabGridProJourneyDetails>li>input {color:red;}
.cabGridPro.v5-sunset .cabGridProSwapDests {display:none !important;}
.cabGridPro.v5-sunset .cabGridProFlagCont {width: 100%;perspective: none;justify-content: center;overflow: visible;bottom:8px;}
.cabGridPro.v5-sunset .cabGridProFlagCont span,.cabGridPro.v5-sunset .cabGridProFlagCont span.flag-selected {display: inline-block;transform: none;box-shadow: 2px -1px 3px 0px rgba(0, 0, 0, 0.25);height: 16px;line-height: 23px;max-width: 24px;opacity: 0.5;width: auto;min-width: 24px;transition: opacity 3s ease;}
.cabGridPro.v5-sunset .cabGridProFlagCont span:hover {opacity:1;}
.cabGridPro.v5-sunset .cabGridProFlagCont span.flag-selected {box-shadow:none;}
.cabGridPro.v5-sunset .cabGridProFlagCont .tooltip {display:none !important;}
.cabGridPro.v5-sunset:after {display:none;}
.cabGridPro.v5-sunset form ul.cabGridProBookDetails>li label,.cabGridPro.v5-sunset .cabGridForm ul.cabGridProJourneyDetails>li>label {text-indent: 0;background-image: none;display: block;font-size: 14px;text-transform: uppercase;color: #ff7600;text-shadow: 0px -2px 3px rgba(255, 247, 0, 0.46);padding: 0;margin: 0;border-bottom: 1px solid #ffed10;border-radius: 0;}
.cabGridPro.v5-sunset .cabGridForm ul.cabGridProJourneyDetails li.cabGridProSwapDests, .cabGridPro.v5-sunset .cabGridProBookDetails input:not([type=submit]), .cabGridPro.v5-sunset .cabGridProBookDetails select, .cabGridPro.v5-sunset .cabGridProBookDetails textarea, .cabGridPro.v5-sunset li.cabGridProChosenLI, .cabGridPro.v5-sunset li.cabGridProLuggage, .cabGridPro.v5-sunset li.cabGridProLuggageOn, .cabGridPro.v5-sunset li.cabGridProPassengers, .cabGridPro.v5-sunset li.cabGridProTickets, .cabGridPro.v5-sunset li.cabGridProTime, .cabGridPro.v5-sunset li.cabGridProVehicles ul>li, .cabGridPro.v5-sunset.cgpMobileN .cgpCont-telephone {background:transparent;border:none;}
.cabGridPro.v5-sunset .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect {flex-basis: auto;padding: 0 !important;margin: -20px 0 0;background-color: transparent;border: none;border-radius: 0;box-shadow: none;background: transparent;}
.cabGridPro.v5-sunset .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {box-shadow: none;}
.cabGridPro.v5-sunset .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label {transform: rotate(32deg);}
.cabGridPro.v5-sunset .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {background-image: none !important;font-size: 14px !important;line-height: 1.45 !important;margin: 0;text-align: center;padding: 0.4em 0 !important;cursor: ew-resize;min-width: 72px;text-indent: 0;white-space: nowrap;text-transform: uppercase;transform: rotate(-32deg);border: 1px solid #ffed10;border-radius: 20px;transition: transform 1s cubic-bezier(0.72, -0.35, 0.07, 1.65); background: #ff6409;color: #fff;}
.cabGridPro.v5-sunset .cabGridProBookDetails input[type=datetime-local], .cabGridPro.v5-sunset .cabGridProBookDetails input[type=email], .cabGridPro.v5-sunset .cabGridProBookDetails input[type=text], .cabGridPro.v5-sunset .cabGridProBookDetails select, .cabGridPro.v5-sunset .cabGridProBookDetails textarea {color:#8f83d0;}
.cabGridPro.v5-sunset .cabGridProBookDetails input[type=datetime-local]:focus, .cabGridPro.v5-sunset .cabGridProBookDetails input[type=email]:focus, .cabGridPro.v5-sunset .cabGridProBookDetails input[type=text]:focus, .cabGridPro.v5-sunset .cabGridProBookDetails select:focus, .cabGridPro.v5-sunset .cabGridProBookDetails textarea:focus {border-bottom: 2px solid rgba(255, 160, 92, 0.59);border-radius:0; box-shadow: inset 0px -14px 14px rgba(234, 230, 77, 0.77);}
.cabGridPro.v5-sunset.cgpMobileY {padding:20px;}
.cabGridPro.v5-sunset.cgpMobileY .cabGridProFlagCont {display:none;}
.cabGridPro.v5-sunset.cgpMobileY .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {position: absolute;background: red;color: #fff;top: 0;right: -24px;width: 90px;transform: rotate(32deg);}
.cabGridPro.v5-sunset.cgpMobileY form ul.cabGridProBookDetails>li label, .cabGridPro.v5-sunset.cgpMobileY .cabGridForm ul.cabGridProJourneyDetails>li>label {font-size:18px;}
.cabGridPro.v5-sunset.cgpMobileY .cabGridForm ul.cabGridProJourneyDetails>li>input {font-size: 30px;text-align: center;font-weight: bold;}

  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey

This orange and red coloured theme uses displays text labels for the taxi journey input fields.

Shortcode syntax:

[cabGridPro class="v5-sunset"]

We can write your custom CSS

Hire Us!

Clean/Plain Layout

The Cab Grid shortcode is assigned a class, ‘v5-clean’


.cabGridPro.v5-clean {background:transparent;}
.cabGridPro.v5-clean:after,.cabGridPro.v5-clean .cabGridProFlagCont {display:none;}

Shortcode syntax:

[cabGridPro class="v5-clean"]

  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water


      Chilled mineral water



No price found for this journey

Visit on desktop computer to view this demo…

Square Layout

This is a fixed width layout with a square style. It is targeted at desktop devices only using the cgpMobileN CSS class. On mobile, the standard responsive layout will load.

The shortcode would look like this:

[cabGridPro class="v5-square"]

The CSS…

.cabGridPro.cgpMobileN.v5-square {width:430px;background:#f5f5f5;border-radius:none;box-shadow:none;border-radius:0;padding:24px;font-size:16px;}
.cabGridPro.cgpMobileN.v5-square:after {display:none;}
.cabGridPro.cgpMobileN.v5-square .la-ball-fussion {color: #00005c;}
.cabGridPro.cgpMobileN.v5-square .cabGridForm ul.cabGridProJourneyDetails>li {width:100%;max-width:100%;}
.cabGridPro.cgpMobileN.v5-square .cabGridForm ul.cabGridProJourneyDetails>li>label {padding-right:10%;}
.cabGridPro.cgpMobileN.v5-square .cabGridVariation {margin: 0 0 3px;padding: 0;height: 42px;}
.cabGridPro.cgpMobileN.v5-square .cabGridVariation a {width: 122px;padding:6px 0;border-radius:0 !important;background:#fff;line-height: 30px;height: 40px;color:#444;border-color: #ddd;}
.cabGridPro.cgpMobileN.v5-square .cabGridVariation a:active,.cabGridPro.cgpMobileN.v5-square .cabGridVariation a:focus,.cabGridPro.cgpMobileN.v5-square .cabGridVariation {background:#fafafa;color:#000;font-size: 75%;}
.cabGridPro.cgpMobileN.v5-square .cabGridProJourneyDetails li.cabGridProRtnSelect {background-position: 12px center !important;background-size: 32px;background-image: url(/wp-content/plugins/cab-grid-pro/i/one-way-icon2.png);background-repeat:no-repeat;max-width:100%;background-color: #fff;border: 1px solid #ddd;}
.cabGridPro.cgpMobileN.v5-square .cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {}
.cabGridPro.cgpMobileN.v5-square .cabGridProJourneyDetails li.cabGridProRtnSelect label {height:auto !important;float:none !important;text-indent: 0 !important;background-image: none !important;display: block !important;line-height: 32px !important;text-transform: uppercase;text-align: center;cursor:ew-resize;min-width:49px;margin:0 !important;border:none;padding:0 22px 0 0!important;font-size: 15px !important;}

Cache/Optimisation Plugin Configuration Recommendations for Cab Grid

Cab Grid is already built for speed, but site owners may still want to optimise their sites using a cache plugin. Often, these plugins change or minify code, and alter the order in which resources are loaded. Because of this, we recommend these plugins are configured to avoid interfering with Cab Grid.

Handling Unlisted Destinations – An Alternative Approach

What happens when a customer is looking for a journey to or from a place that isn’t listed in the AREAS tab? New features in Cab Grid Pro open scope for new techniques to handle these journeys by providing a streamlined process to request a custom quotation…

Customise taxi booking form based on user input

Ever needed to hide or show booking form fields based on the destination or passenger numbers selected by your customer? In Cab Grid Pro v5.5 dynamic CSS classes are added to the main Cab Grid element allowing subsequent manipulation of content through CSS.

Make Built-in Cab Grid Pro Booking Form Fields Optional

Whilst NOT RECOMMENDED, it is possible to disable Cab Grid’s built-in booking form fields. This article describes how to use advanced settings (Defaults add-on or _settings.php) and CSS to hide built-in fields that are mandatory by default.

Cab Grid is Built for Speed

Cab Grid passes Google Lighthouse performance audits with a perfect score of 100…. Google places significance on page speed and customers have limited patience loading websites. WordPress plugins and themes can slow load times if they’re not built with speed in mind. However, Cab Grid is built for speed….

Cab Grid Stripe Integration Upgrading from v2 to v3

Cab Grid Stripe Integration version 3.0 has been released.
This update provides integration with Stripe’s newest API (as of May 2019) and provides compatibility with Strong Customer Authentication. Crucially, however, it changes the way the main checkout process works. This article discusses the changes between version 2 and version 3…

Cab Grid Pro Stripe Payment Processing Add-on v3 Configuration

Stripe provides a means for users to process online payments using credit cards (e.g. Visa or MasterCard or American Express), debit cards, or bank transfers (via iDEAL, GiroPay or SoFort).
Version 3.0 of the Cab Grid Pro Stripe Integration Add-on updates Stripe functionality to provide support for Strong Customer Authentication. This includes Stipe’s new checkout process that replaces the previous “pop-up” interface and allows for processing of other payment types such as Apple Pay and Google Pay. This article describes each of the options available under the STRIPE tab in Cab Grid Pro.

Hide Unsupported Destinations

Populate the destination list based on the selected pick-up location…
Cab Grid Pro v5.2 now supports the option to disable destinations where no price has been configured. Customers select a pick-up location (origin) and the destination list will adjust dynamically to only show journeys that have a price set.

Email notification configuration

How to configure a dedicated Cab Grid Pro email address distinct from the main WordPress Admin email address. Useful for auto-responders or dedicated booking processing.

Local currency support

Cab Grid can process online payments via Paypal (built-in) or other payment gateways (via add-ons). But what if your local currency is not supported by any of the payment gateways we offer?….

One solution is to use the deposit/surcharge field to convert the local currency price to a currency supported by the chosen payment gateway…

Cab Grid Pro Admin Error/Warning Messages

Cab Grid generates error or warning messages when it encounters a misconfiguration. Detailed error/warning messages are usually only displayed to WordPress admin users. They are not displayed to regular users or customers. This article details some common error messages or warnings and what possible solutions might be…

Direct journey link syntax

Need to offer customers direct access to popular routes or journeys? Build a custom link that pre-populates the Cab Grid Pro price calculator…

WSPay Add-on Set up

This article provides guidance for setting up our WSPay add-on plugin. WSPay is a payment gateway (like Paypal or Stripe) that processes payments for businesses in Croatia, Slovenia, Bosnia and Herzegovina, and Montenegro.

Dedicated User Profile

Personalise the Cab Grid experience for registered users by pre-populating their primary address and offering a discount unique to them….

Individual WordPress User Discounts in Cab Grid Pro

Cab Grid Pro version 5 allows a dedicated discount formula to be defined for individual users logged in to your website. When a logged-in user calculates a journey fare price, their dedicated discount is automatically applied.

Discount formulas are defined in the user’s profile page. This article describes how to set up dedicated user discounts.

Mailpoet Integration

Cab Grid Pro version 5.1 introduces the ability to offer a “Join our mailing list” checkbox on the taxi booking form. When checked, a customer’s name and email are added to the designated list.

MailPoet is a free WordPress plugin that provides mailing list management and scheduling from within the WordPress admin.

Require International Dialling Code in Taxi Booking Form

Cab Grid Pro offers the option to have customers select their international dialling code when entering their phone number on the booking form. This can be disabled by setting it to off in the Twilio SMS text message section of the OPTIONS tab on the Cab Grid Pro WordPress admin page.

Cab Grid Taxi Fare Price Currency Symbol

The currency symbol is set under the OPTIONS tab in Cab Grid. It is displayed along side any price that is calculated. The currency symbol field can accept individual symbols or HTML codes.

How to remove the shadow from the new Cab Grid Pro v5 styling

The new version of Cab Grid Pro automatically applies a drop shadow to the taxi price calculator box. This can be disabled by adding a simple line of CSS code to the STYLING CSS box under the OPTIONS tab on the Cab Grid Pro WordPress admin page: .cabGridPro:after {display:none;}

Set the priority/order of places and vehicles

When Cab Grid’s own logic does not meet requirements a special (hidden) feature allows the order of places in origin or destination drop-down lists, and the priority of vehicles to be defined.

Combine Calculation Modes in Cab Grid Pro v5

Cab Grid Pro 5 introduces the ability to combine calculation modes. This is useful where the choice of vehicle should be offered (rather than determined by the system).

Modes are combined by adding comma-separated values to the layout attribute of the Cab Grid Pro shortcode as follows. At this time, the only possible combinations are Vehicle and Time layout, and Vehicle and Ticket layout.

Pre-defined stylesheets in Cab Grid Pro v5

Cab Grid Pro version 5.0 provides the ability to set the main stylesheet loaded with the front-end calculator plugin. There are a variety of pre-defined style-sheets available that provide a starting point for any custom CSS.

Assigning Access to Cab Grid Admin in v5+

A WordPress website provides the ability for individual users to log in and perform actions on the site, such as commenting on posts or editing pages. Most websites will have only one user - the administrator - but others can be added (or registered). Any user can now...

URL Rewrite Redirects in Cab Grid Pro v5

Cab Grid Pro v5 makes use of URL rewrite functionality to present more user-friendly web addresses for resources. Amongst other advantages, this helps with email deliverability since some spam filters flag messages which link to WordPress folders. Cab Grid Pro v5 will...

Schedule Reminder Messages in Booking Management

Automatically remind customers about upcoming bookings via SMS text message or email with the Booking Management Add-on v2.2. Schedule up to two reminders to be sent ahead of both pick-up and return journeys.

What’s New in Cab Grid Pro Version 5.0?

Cab Grid Pro version 5 is out!
List of key new features in version 5.0 of the Cab Grid Pro taxi price calculator plugin for WordPress websites.

– Individual discounts can be applied to WordPress user accounts.
– Customer advised of booking availability.
– Grant access to Cab Grid Pro admin for other roles and users.
– Multiple discount codes.
– Date picker for blocked out dates.

Discount Mechanisms

Prices calculated by Cab Grid Pro can be discounted (or modified) by providing promotional coupon or discount codes, or by implementing price variation formulas. This article lists the various methods available (or coming soon).

Handling Deposit (part) Payments and Surcharges

How to manipulate the online payment amount to serve either as a deposit (part) payment (pending confirmation), or to add a surcharge (card handling fee), and how the Booking Management add-on processes subsequent post-booking payments.

Multiple Calculation Modes on a Single Page

Let’s consider a business that offers multiple passenger transportation models – Airport Transfers, City Tours, Chauffeur Service and Taxi. We illustrate how these models can be implemented on a single page with Cab Grid Pro.

Cab Grid Pro Stripe Payment Processing Add-on v2 Configuration

This article describes each of the options available under the STRIPE tab in Cab Grid Pro. The Stripe tab is available when the Cab Grid Pro Stripe Integration add-on is installed and activated. Stripe provides a means for users to process online payments using credit cards (e.g. Visa or MasterCard or American Express), debit cards, or bank transfers (via iDEAL, GiroPay or SoFort).

Is Cab Grid GDPR Compliant?

Cab Grid does not store any customer data. All booking data is sent to administrators via email for offline processing. If the Booking Management Add-on is installed & active, booking data is stored on the server and customer consent may be required. This article provides details.

Cab Grid Auto-Updater

Cab Grid Pro (version 4 and later), the Cab Grid Booking Management Add-on, and the Cab Grid Pro Stripe Integration Add-on include automatic updating. Updates will be available via WordPress's built-in update mechanism and administrators should be notified in the...

Cab Grid Compatibility Test

Cab Grid has a built in compatibility test. This test can show incompatibility between the hosting environment and Cab Grid Pro. It accessible from the BASIC edition of Cab Grid and from Cab Grid Pro v4 or higher.

Advanced Settings for Cab Grid Pro – Defaults add-on plugin

Download the free Defaults add-on plugin for WordPress to configure advanced Cab Grid Pro taxi price calculator settings independently of the main plugin. Update button and form field labels, set min & max passenger or time periods, set price decimals & formatting, and more…

Migrating Cab Grid to another web site

It may be that you need to move Cab Grid to another website – say from a development site to a live site – and, in doing so, preserve the settings, prices, messages, and other configurations. There is [currently] no built in process to manage this process. This article discusses techniques for copying Cab Grid data from one web site to another.

Changing the Return/One-Way Icon Button with CSS Styling

Cab Grid Pro has the option to offer return journeys. How these are calculated and configured are the subject of a separate article on one-way or return taxi fare price calculations. We have spent some time labouring over how best to depict this option to...

Taking online card payments for taxi journeys with Paypal

Cab Grid Pro can process debit or credit card payments out of the box via Paypal. To do this, a registered Paypal ID (usually an email address) should be added to the 'Paypal ID & Currency:' field under the OPTIONS tab on the Cab Grid Pro admin page in the...

Style Builder

Currently in beta, the Cab Grid style builder utility helps preview and test out custom CSS styling for the taxi fare price calculator interface. It provides a visual interface for adjusting styles for the Cab Grid calculator. [button...

Troubleshooting – Cab Grid not working?

You might find that you install the Cab Grid free or Cab Grid Pro plugin and it does not function correctly. There are many reasons this may happen, but most likely it is a compatibility issue with your theme or other plugins. This article describes how to troubleshoot problems with the Cab Grid taxi calculator plugin for WordPress.

Accelerated Mobile Pages (AMP) with Cab Grid

Cab Grid Pro v4.5.2 and Cab Grid (basic edition) 1.2.10 will introduce basic Accelerated Mobile Pages (AMP) support. AMP will be enabled on your website through a third-party plugin, such as AMP By Automattic. Currently, if a post is rendered by AMP, any Cab Grid...

Cab Grid Pro Calculation Modes

As a taxi price calculator, Cab Grid Pro supports several different calculation models - that is the method used to look-up and calculate the price. This article describes each of those. The calculation mode can be set globally under the OPTIONS tab on the...

Text substitution syntax for messages shown to visitors

[NOTE: This feature requires Cab Grid Pro v4.4.1] Cab Grid Pro displays messages to visitors at various points in the calculation/booking process. These messages are largely configurable through the Cab Grid Pro admin page, under the OPTIONS tab. They include: 'No...

Receive booking data CSV

All the information about a taxi booking request can be compiled to a single (CSV) file and sent as an attachment along with the cab booking notification email. This file can then be imported to a third-party application or booking system. CSV attachments are sent to the administrator only, and only if enabled in the Cab Grid Pro admin.

Booking Management Add-on

The Booking Management Add-On adds online booking management to the Cab Grid Pro WordPress plugin. This means that bookings are stored in the WordPress database and can be processed (accepted, declined, cancelled, deleted, etc.) from a page on your website.

Stripe Integration

Stripe is an alternative card processing provider. Stripe offers a more integrated checkout experience. It is easy to sign up for and supports more currencies.
We’ve done the integration work to provide a Stripe add-in plugin for Cab Grid Pro. This makes it super-easy to take card payments for journeys calculated through Cab Grid Pro.

Custom Labels for Form Fields & Buttons

Should the Cab Grid Pro plugin be repurposed it may be necessary to edit the built-in booking form labels and buttons. This can be done by manually editing the _settings.php file (with some caveats).

Cab Grid Pro Return Journey Calculations

Cab Grid Pro can calculate return journey prices. This is found under the OPTIONS tab of the Cab Grid Pro WordPress admin labelled, "Offer return journey option:" When enabled there is a choice of two methods Cab Grid can use to calculate return journey prices: Lookup...

Cab Grid Pro Extras

The EXTRAS tab on the Cab Grid Pro WordPress Admin page allows an unlimited number of additional items to be listed for purchase or to be selected along side a booking request. This is useful to offer sundries such as refreshments, services such as guided tours or meet & greet, or free enhancements like child seats.

What’s New in Cab Grid Pro Version 4

Version 4.5 of Cab Grid Pro, the taxi booking and price calculator plugin for WordPress, has been released. It is available to buy and download here. Users of versions 1 to 3.x may request a free upgrade by submitting a support request. Cab Grid Pro 4 introduces many...

Customising Booking Acknowledgement Emails

Cab Grid Pro allows you to compose bespoke booking acknowledgement messages that are emailed to customers when the taxi booking form is submitted. This email is completely customisable with details entered on the taxi booking form. On the Cab Grid Pro OPTIONS tab,...

Bulk Price Updates

This article gives details on updating prices in bulk using a formula and copying taxi fare prices from an existing vehicle price table. ...

Auto-enter return prices

When the ‘Automatically update empty corresponding [return] prices as you type?’ box is ticked, the corresponding return (or opposite direction) price will be entered in the pricing table

Styling/hiding Price Variation Buttons

In Cab Grid Pro a visitor has the option to select different price variants for a journey using buttons displayed at the top right of the Cab Grid price calculator. (For information on configuring these price variations please see this article.) These buttons can be...

Address Autocomplete

Cab Grid Pro version 3 offers address auto-complete on the taxi booking form via the Google Maps JavaScript API. This article describes how to find or generate your API key.

Covering other taxi journeys

How to provide a means for visitors to get prices for taxi journeys between locations you do not list using Cab Grid. This article describes using an ‘-other’ location and a link to a custom taxi price quote request form with Cab Grid.

Managing taxi booking requests

Responding quickly to taxi booking requests can avoid lost cab bookings. This article describes how to manage booking requests sent via the Cab Grid Pro plugin.

Updating Cab Grid Pro (version 2 – 4.0)

New versions of Cab Grid Pro taxi booking plugin for WordPress are distributed to license holders who must upload new files to their website. This can be done via FTP upload to the WordPress plugins directory or via the WordPress admin. This article describes how to use either method to update (upgrade) Cab Grid Pro to the latest version.

Cab Grid Pro Shortcode Attributes

Cab Grid Pro’s shortcode supports attributes that can adjust the appearance and functionality of each instance of Cab Grid on your website. This article discusses what shortcode attribute are available and how to implement them (Layout/ID/Icons/Luggage/Pre-defined).

Cab Grid Translations

We are looking for help translating Cab Grid into other languages. Please use the form on this page to get in touch if this is something you can do.

Cab Grid Pro Destination Groups

Segment destinations by assigning them to groups, then display a version of Cab Grid for each group. This feature allows many instances of the Cab Grid plugin to be displayed on a single web page, each with a different purpose. For example, one for airport transfers, one for school runs, and one for suburban routes. This article describes how to use the Groups feature of the Cab Grid Pro plugin for WordPress.

Basic Style Changes using CSS

How to change the appearance of the Cab Grid fare price calculator using custom CSS styling. Custom styles cab be added under the OPTIONS tab.

Custom Booking Form Fields

Cab Grid Pro provides an online booking form that is displayed (optionally) after a price is calculated. This form contains a set of standard fields, but custom fields can be added to augment and personalise the booking form. Values entered in these form fields are included with the booking notification email.

What’s new in CabGrid Pro version 2.x?

We’re delighted to announce the availability of Cab Grid Pro version 2. This update includes several new features and under the hood enhancements. This article discusses these new features and enhancements.

Origin and Destination

How to configure the ORIGIN and DESTINATION options for areas in the Cab Grid Pro taxi price calculator plugin for WordPress.

Price variations and formulae

How to configure price variations in the Cab Grid Pro taxi price calculator plugin for WordPress. Add up to two separate price calculations applied to your main price at the click of a button.

Auto-update error

You may see this error when you try to install an update: Update Failed: The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature We are working on a fix for this, but we have found that if you try the update...

What is the Cab Grid WordPress Plugin?

Video tutorial showing installing the plugin from the WordPress plugin directory, activating the Cab Grid plugin, configuring the currency symbol and changing messages, adding areas and specifying prices, and publishing the taxi price calculator on your WordPress website

Cab Grid Basic Edition Install & Setup Video Tutorial

Video tutorial showing installing the plugin from the WordPress plugin directory, activating the Cab Grid plugin, configuring the currency symbol and changing messages, adding areas and specifying prices, and publishing the taxi price calculator on your WordPress website

Cab Grid Pro ReadMe

Please scroll through to see the CHANGE LOG... Cab Grid Pro users can upgrade to the latest version from their WordPress Admin Panel. Any available update will be shown on either the UPDATES page or the PLUGINS page.

Error: Email Sending Problem

This error message may appear on the Cab Grid Pro admin page: EMAIL SENDING PROBLEM: We have been unable to send a test email. There may be a problem with your hosting settings. Please insure you have set up your server correctly to send email. Click here to try...