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

      Water

      Chilled mineral water

      -+

      $1.491.49


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

      Water

      Chilled mineral water

      -+

      $1.491.49


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"]

CSS:

.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

      Water

      Chilled mineral water

      -+

      $1.491.49


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)

/*TRANSFERS v5*/
.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 li.group-result {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;}
/*PRICE*/
.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;}
/*PRICE VARIATION*/
.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 a.active {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;}
/*BOOKING FORM*/
.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;}
/*EXTRAS*/
.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;}
/*Off*/
.cabGridPro.v5-Transfers form ul.cabGridProJourneyDetails li.cabGridProOff {display:none;}

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

Sunset Layout

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

CSS

/*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

      Water

      Chilled mineral water

      -+

      $1.491.49


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’

CSS

.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

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


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 a.active {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;}



Require Payment After Taxi Booking Submitted

Require Payment After Taxi Booking Submitted

Want to make payment mandatory when a customer submits a taxi booking request in CabGrid Pro? This is something occasionally requested by our users. Unfortunately, this is not directly possible. However, we have some suggestions…

Airport meet and greet name plate print out with your logo

Airport meet and greet name plate print out with your logo

The Nameplate feature is part of the CabGrid Booking Management Add-on. The NAMEPLATE button is located in the MANAGE column next to each booking. If the CabGrid Driver add-on is installed, a driver will receive a link to the nameplate page for that booking when...

Logo Image

The logo field in options allows a company logo to be specified. This is to be used in default/generic emails and other places across the system – such as the airport greeting card.

Booking Reference Seed

Booking Reference Seed

The Booking Reference Seed option allows you to define or adjust the booking reference assigned when a booking is requested.

Highlighting Price Variation Options

Highlighting Price Variation Options

Whilst CabGrid cannot currently automatically update the price based on booking form input, we have some recommendations for drawing your customer’s attention to the price variation buttons…

Automatically Accept CabGrid Booking Requests

Automatically Accept CabGrid Booking Requests

The Booking Management add-on cannot automatically accept or confirm bookings. However, it is possible to give this illusion to your customer by re-wording the email and messages shown during the booking process…

How to use CabGrid Pro v5 Alt Styles

How to use CabGrid Pro v5 Alt Styles

CabGrid Pro version 5.8.14 includes a new set of built-in styles. Selecting these styles means custom CSS for these styles need not be entered in the custom CSS box. To use these styles, select ‘Alternative Styles v5’ under BASE STYLES in the OPTIONS tab of the CabGrid Pro WordPress admin panel.

Troubleshooting the CabGrid Stripe Integration Add-on Plugin

Troubleshooting the CabGrid Stripe Integration Add-on Plugin

The CabGrid Stripe Integration add-on adds Stripe payment processing to the CabGrid price calculator and booking plugin. If not properly configured the Stripe add-on may not function as expected. Here are some things to check if the Stripe payment option is not offered at the end of the booking process…

Cash Payment Options

Cash Payment Options

This article and accompanying video tutorial describe mechanisms for offering customers a cash payment option in CabGrid.

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

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

CSS code snippets for Cab Grid Pro version 5 and above that change the appearance of the one-way/return button icon shown in the plugin calculator interface. These snippets can be added to the Custom CSS box under the OPTIONS tab in the Cab Grid Pro WordPress admin page.

Driver Dispatch Add-on Setup

Driver Dispatch Add-on Setup

The Cab Grid Driver Add-on plugin allows drivers to be added and managed through the WordPress admin interface. Drivers can be assigned to taxi bookings and sent notifications by email or SMS text message. Customers can also be notified when a driver is assigned to their booking.

Cache/Optimisation Plugin Configuration Recommendations for Cab Grid

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

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

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

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 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 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

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

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

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

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 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

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

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

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

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

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

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.

CabGrid Taxi Fare Price Currency Symbol

CabGrid 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

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;}

Combine Calculation Modes in Cab Grid Pro v5

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.

Display a fare price table using [cabGridProTable] shortcode

Display a fare price table using [cabGridProTable] shortcode

The cabGridProTable shortcode displays a price table as opposed to the regular CabGrid Pro price calculator. Prices and table attributes can be controlled through attributes defined as part of the shortcode (or in the Gutenburg block). These include captions, vehicles, groups, links, destinations and more.

Using Pre-defined Styles in CabGrid Pro

Using Pre-defined Styles in CabGrid Pro

CabGrid Pro version 5.0 provides the ability to select 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+

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...

What’s New in Cab Grid Pro Version 5.0?

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

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

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

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

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 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 CabGrid Pro – Defaults add-on plugin

Advanced Settings for CabGrid 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

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 in Cab Grid Pro version 4

Changing the Return/One-Way Icon in Cab Grid Pro version 4

The CSS code on this page is geared primarily to Cab Grid Pro version 4 or earlier and may require some further adjustments to be applied to Cab Grid Pro version 5 or later. However, the basic principles remain the same so only minor updates should be necessary. An...

Taking online card payments for taxi journeys with Paypal

Taking online card payments for taxi journeys with Paypal

CabGrid Pro can process debit or credit card payments out of the box via Paypal: Select the OPTIONS tab on the CabGrid Pro admin page in the WordPress admin Section Enter your Paypal ID (usually your email address) in the 'Paypal ID & Currency:' field. Select your...

Style Builder

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.

Troubleshooting CabGrid WordPress Plugin Not Working?

Troubleshooting CabGrid WordPress Plugin Not Working?

You might find that you install the CabGrid free or CabGrid 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

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...

CabGrid Pro Calculation Modes

CabGrid Pro Calculation Modes

As a taxi price calculator, CabGrid 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 CabGrid Pro...

Text substitution syntax for messages shown to visitors

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

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

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 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 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

Cab Grid Pro Extras

The EXTRAS tab on the CabGrid 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

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

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

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

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

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

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

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

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 CabGrid Pro plugin for WordPress.

Updating Cab Grid Pro (version 2 – 4.0)

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.

CabGrid Pro Shortcode Attributes

CabGrid Pro Shortcode Attributes

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

CabGrid Translations

CabGrid 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.