Styling Demos CSS library for Cab Grid Pro versions 4.5.5 and earlier

The following examples show how the appearance of the Cab Grid price calculator can be changed using CSS styling.

Custom CSS code can be entered in the ‘CSS Styling‘ box under the OPTIONS tab on the Cab Grid Pro page in your 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 checkout the Custom Style Builder.

Note: Make sure the latest version of Cab Grid Pro is installed to insure CSS classes and HTML are up to date.

NOTE: This article applies to versions of Cab Grid Pro prior to v4.5.6 where the Cab Grid price calculator shortcode needed to be enclosed in an HTML element with a given ID or class. For later versions, a class attribute can be added to the shortcode. See CSS styling examples for Cab Grid Pro version 4.5.6 and later for details.

  •  
  • 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 enclosed in an HTML element and given a custom id: cabGridProFullWidthDemo.

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

HTML (entered in page editor text/source mode):
<div id="cabGridProFullWidthDemo">[cabGridPro icons="light"]</div>
Custom CSS (entered in CabGrid Pro Options tab):
#cabGridProFullWidthDemo .cabGridPro {background:none;max-width:100%;padding:0;box-shadow:none;color:#fff;}
#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProPassengers input, #cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProLuggage input {width:25%;font-size:38px;max-width:80px;line-height: 1;height: 44px;}
#cabGridProFullWidthDemo .cabGridPro form ul li select.cabGridProDropSelect, #cabGridProFullWidthDemo .cabGridPro form ul li select.cabGridProPickSelect {font-size:38px;height:44px;line-height:44px;max-width:400px;}
#cabGridProFullWidthDemo .chosen-container-single .chosen-single {height:44px;font-size:33px;line-height:44px;}
#cabGridProFullWidthDemo .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers label img, #cabGridProFullWidthDemo .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProLuggage label img {max-width:44px;height:44px;max-height:44px;display:none;}
#cabGridProFullWidthDemo .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers {margin-right:17px;}
#cabGridProFullWidthDemo .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers label {background-image: url(/wp-content/plugins/cab-grid-pro/i/passenger-icon2-light.png);width:40px;display: inline-block;background-size:contain;background-repeat:no-repeat;height:44px;line-height: 44px;font-size: 26px;vertical-align: top;background-position-x: right;margin-right: 4px;}
#cabGridProFullWidthDemo .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProLuggage label {background-image: url(/wp-content/plugins/cab-grid-pro/i/luggage-icon-light.png);width:38px;display: inline-block;background-size:contain;background-repeat:no-repeat;height:40px;line-height: 44px;font-size: 26px;vertical-align: top;background-position-x: right;margin-right: 4px;}
#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProRtnSelect {height: 44px;vertical-align: top;}
#cabGridProFullWidthDemo .cabGridProPrice {padding:10px;margin:10px;color:#f0edf7;text-shadow:0px 0px 1px #222;}
#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProPassengers input, #cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProLuggage input {background: #fafafa;}
#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProFromSelect label, #cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProToSelect label,#cabGridProFullWidthDemo label#passengers-error.error {display:none !important;background-image:none !important;}
#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProPassengers input.error, #cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProLuggage input.error {background-color:rgba(255,0,0,0.3);}
#cabGridProFullWidthDemo .cabGridProButton, #cabGridProFullWidthDemo .cabGridProBookButton {font-size:32px;padding:8px 50px;}
#cabGridProFullWidthDemo .cabGridProMessage {color:#f7f7ff;}

Need a Hand?

Hire Us!
HTML:
<div class="cab-grid-green-squared">[cabGridPro icons="light"]</div>
CSS:
.cab-grid-green-squared .cabGridPro {color: #f7f7f7;box-shadow: none;background: rgb(118,173,61);border-radius: 0px;border-bottom: 4px solid rgba(232,232,232,0.9);font-family:Calabri,Verdana,"Helvetica Neue",Trebuchet,"Trebuchet MS",Helvetica,Arial,sans-serif;}
.cab-grid-green-squared .cabGridPro form ul.cabGridProJourneyDetails {margin: 0;}
.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails {border:none;border-radius: 0; border-top: 2px groove rgba(212, 209, 209, 0.3);margin-top:0 !important;}
.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails li label {font-size: 12px;text-transform: uppercase;padding-bottom: 3%;}
.cab-grid-green-squared .cabGridPro form ul li input,
.cab-grid-green-squared .cabGridPro form ul li.cabGridProTickets input,
.cab-grid-green-squared .cabGridPro form ul li.cabGridProPassengers input,
.cab-grid-green-squared .cabGridPro form ul li.cabGridProLuggage input,
.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect,
.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails li input {border-radius: 0;background: rgb(248,248,248);color: #999;font-size: 20px;height:32px;line-height:32px;box-shadow: 0px 1px 1px rgba(0,0,0,0.1);}
.cab-grid-green-squared .cabGridPro form ul li textarea,
.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails li textarea{border-radius: 0;background: rgb(248,248,248);color: #999;padding:3px;box-shadow: 0px 1px 1px rgba(0,0,0,0.1);}
.cab-grid-green-squared .cabGridPro .chosen-container .chosen-single,
.cab-grid-green-squared .cabGridPro select {border-radius: 0;background: rgb(248,248,248);color: #999;font-size: 20px;height:32px;line-height:32px;box-shadow: 0px 1px 1px rgba(0,0,0,0.1);}
.cab-grid-green-squared .cabGridPro .chosen-container-single .chosen-single div b {background-position: 3px 6px;}
.cabGridProPrice .cabGridProBookButton,
.cab-grid-green-squared .cabGridPro .chosen-container .chosen-drop {border-radius:0;color:#999;background: rgb(248,248,248);}
.cab-grid-green-squared .cabGridPro .chosen-container .chosen-results li {color:#999;}
.cab-grid-green-squared .cabGridPro .cabGridProPrice {border-top: 2px groove rgba(222, 221, 221, 0.28);transition:all 2s ease;}
.cab-grid-green-squared .cabGridPro .cabGridProPrice,.cab-grid-green-squared .cabGridPro .cabGridProMessage {color:#f7f7f7;padding-top: 2%;}
.cab-grid-green-squared .cabGridPro .cabGridProSendBookingRequest {height:auto !important;}
.cab-grid-green-squared .cabGridPro form ul li label.error {color:#69ec54;font-size:12px !important;}
.cab-grid-green-squared .cabGridPro h1 {border-radius: 0;border: none;color: #e4622d !important;text-shadow: none;background: rgb(220, 255, 184);border-bottom: 2px solid #cacaca;}
.cab-grid-green-squared .cabGridPro .cabGridProDateSelect {line-height:normal !important;font-size:13px !important;}
.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect select {height:auto;font-family:Calabri,Verdana,"Helvetica Neue",Trebuchet,"Trebuchet MS",Helvetica,Arial,sans-serif;}
.cab-grid-green-squared .cabGridPro .chosen-container .chosen-results li {text-align:center;padding:5px 0 !important;font-size:18px;}
.cab-grid-green-squared .cabGridPro .chosen-container .chosen-results li.highlighted {background: rgb(190, 225, 154);}
.cab-grid-green-squared .cabGridPro .cabGridProPriceDigCont {font-size:64px;line-height:64px;width: 100%;}
.cab-grid-green-squared .cabGridPro .cabGridProPrice img {margin: 0;display: inline-block;clear: left;height: 61px;box-shadow: none !important;border: none !important;vertical-align: bottom;padding-right: 3%;}
.cab-grid-green-squared .cabGridPro .cabGridProPrice .cabGridProPriceDigCont .cabGridProPriceDig {padding-right: 6%;}
.cab-grid-green-squared .cabGridPro .cabGridProPrice .cabGridProBookButton {display: inline-block;font-size: 26px;vertical-align: bottom; margin: 0 0 6px 0;height: 48px;min-width:190px;max-width:50%;}
.cab-grid-green-squared .cabGridPro .cabGridVariation {margin: 6px 0 0 0;}
.cab-grid-green-squared .cabGridPro .cabGridVariation a {border-bottom:none;border-radius:0 !important;background-color:rgba(255,255,255,0.5) !important;color:#999 !important;}
.cab-grid-green-squared .cabGridPro .cabGridVariation a.active {background-color:#fff !important;box-shadow:none;color:#666 !important;}

Green Squared Layout

The Cab Grid shortcode is enclosed in an HTML element with class ‘cab-grid-green-squared‘. Here we opted to use a class instead of an ID so it can be used on multiple instances.

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

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

The Cab Grid shortcode is enclosed in an HTML element with id ‘cabGridProDemoPicBG’
#cabGridProDemoPicBG .cabGridPro {background:rgba(0,0,0,0.2);}
#cabGridProDemoPicBG .cabGridPro form ul.cabGridProBookDetails {background: rgba(235, 215, 255, 0.57);color: #000;text-shadow: 0px 0px 1px #fff;}
#cabGridProDemoPicBG .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProVehicles ul li.selected {box-shadow: inset 1px 1px 3px 1px rgba(80, 80, 80, 0.6), 0px 0px 7px 1px rgba(255, 255, 255, 0.46);border-color: rgba(22, 5, 38, 0.49);}

Shortcode syntax:
[cabGridPro layout="vehicle"]

Ticket Layout

This is defined either globally in the Cab Grid Pro OPTIONS tab or through a shortcode attribute as [cabGridPro layout="tickets"]
The Cab Grid shortcode is enclosed in an HTML element with id ‘ticketsDemo’
#ticketsDemo .cabGridPro {margin: 50px 0 0 0;
padding: 20px 0 0 0;
width: auto;
height: auto;
background: rgba(44, 200, 70, 0.44);
border: 3px solid #e0acac;
border-radius: 80px;
box-shadow: inset 0px 0px 2px rgb(255, 253, 253);}

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

We can write your custom CSS

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

Background Image

You may want to add a background image to the calculator (or sidebar widget) directly. This exmample is a standard Cab Grid Pro instance enclosed in an HTML element with a custom ID (cgpBGimgDemo) and a custom background image: <div id="cgpBGimgDemo">[cabGridPro icons="light"]</div>
The CSS (styling) to add the background image is as follows.
#cgpBGimgDemo .cabGridPro {background:url(/wp-content/uploads/2015/11/blurred-road-lights.jpg);background-size:cover;color: #eee;text-shadow: 0px 1px 0px #fff;}
#cgpBGimgDemo .cabGridProPrice,#cgpBGimgDemo .cabGridProMessage {color:#e8e8e8;}
#cgpBGimgDemo .cabGridPro form ul.cabGridProBookDetails {background: rgba(0,0,0,0.4);}

Clean/Plain Layout

The Cab Grid shortcode is enclosed in an HTML element with id ‘cgpCleanDemo’
#cgpCleanDemo {padding:0;margin:0;border:1px solid #eee;border-radius:3px;}
#cgpCleanDemo .cabGridPro {box-shadow:none;background-color:transparent;background:none;margin: 0;padding: 0;}
#cgpCleanDemo .cabGridPro form ul li input {border:1px solid #ddd !important;background:rgba(250,250,250,0.6);}
#cgpCleanDemo .cabGridPro form ul li .cabGridProDropSelect,#cgpCleanDemo .cabGridPro form ul li .cabGridProPickSelect {margin:0;padding:0;border:none;background:transparent;}
#cgpCleanDemo .cabGridProMessage,#cgpCleanDemo .cabGridProPrice, #cgpCleanDemo .cabGridPro form ul.cabGridProJourneyDetails li label,#cgpCleanDemo .cabGridPro form ul.cabGridProBookDetails li label {color: #888 !important;}
#cgpCleanDemo .cabGridPro .cabGridVariation a.active {background-color:rgba(206,206,206,0.48);}
#cgpCleanDemo .cabGridPro form ul.cabGridProBookDetails {border: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

Hide the luggage option

You may want to hide the option to select the number of luggage items. This is relatively simple.
The CSS (styling) is as follows.
.cabGridProLuggage {display:none !important;}
This code will universally hide the luggage option from all instances of Cab Grid Pro on your site, but you could enclose a specific instance in an HTML element with an ID and target only that instance (as in above examples).

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

Customizations from $49.99

Hire Us!

Sunset Layout

The Cab Grid shortcode is enclosed in an HTML element assigned a class named ‘cab-grid-sunset
/*SUNSET TEMPLATE*/
.cab-grid-sunset .cabGridPro {font-family:Calabri,Verdana,"Helvetica Neue",Trebuchet,"Trebuchet MS",Helvetica,Arial,sans-serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);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 );}
.cab-grid-sunset .cabGridPro.cgpMobileY {margin:0;padding:0;}
.cab-grid-sunset .cabGridPro form ul li .cabGridProDropSelect,.cab-grid-sunset .cabGridPro form ul li .cabGridProPickSelect {width:100%;}
.cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails {}
.cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li {background-image:none;background:transparent;text-indent:0;}
.cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers,.cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProLuggage {display:inline-block;vertical-align: top; width:14.8%;margin:0;padding:0;text-align:left;}
.cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProFromSelect,.cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProToSelect {display:inline-block;vertical-align: top; width:29.9%;margin:0;padding:0;text-align:left;}
.cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProPassengers, .cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProLuggage,.cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProFromSelect,.cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProToSelect {width:45%;}
.cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li label {height:auto !important;float:none !important;text-indent: 0 !important;background-image: none !important;display: block !important;text-align: left;font-size: 12px !important;line-height: 1 !important;padding: 0 0 6px 1px !important;font-weight: bold !important;text-transform: uppercase;}
.cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li label img {display:none !important;}
.cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li input:not([type="button"]) {width:100%;}
.cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect {/*cursor:url(/wp-content/plugins/cab-grid-pro/i/return-icon-light.png),auto;*/width: 45px;padding: 0 !important;margin: 0;}
.cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect label {font-size: 9px !important;line-height: 1.2 !important;margin: 29px 0 0 0;text-align: center;padding: 2px !important;cursor:ew-resize;min-width:49px;}
.cab-grid-sunset .cabGridPro.cgpMobileY .cabGridProJourneyDetails li.cabGridProRtnSelect {display:block;clear:both;width:88%;margin:10px auto;}
.cab-grid-sunset .cabGridPro.cgpMobileY .cabGridProJourneyDetails li.cabGridProRtnSelect label {font-size: 16px !important;margin: 5px auto 4px;padding: 7px 0 !important;background-color: rgba(255, 239, 234, 0.49);border: 2px solid rgba(255, 255, 255, 0.44)}
.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails {margin-top: 0;background-color: rgba(240, 156, 16, 0.64);box-shadow: inset 0px 1px 122px 123px rgba(240, 209, 11, 0.88);padding: 20px;border: 1px solid rgba(190, 190, 190, 0.42);border-radius: 4px;}
.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li {min-height:36px;}
.cab-grid-sunset .cabGridPro form ul li.cabGridProTickets input,.cab-grid-sunset .cabGridPro form ul li.cabGridProPassengers input,.cab-grid-sunset .cabGridPro form ul li.cabGridProLuggage input,.cab-grid-sunset .cabGridPro form ul li .cabGridProDropSelect .chosen-single,.cab-grid-sunset .cabGridPro form ul li .cabGridProPickSelect .chosen-single,.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect,.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li textarea,.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li input:not([type="submit"]) {background: #fff;box-shadow: inset 1px 1px 1px rgba(0,0,0,0.13);border-radius: 4px;border: 1px solid rgb(209,206,196);height: 36px;line-height: 36px;color: #999;}
.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect {padding:0;}
.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect select {color:#999 !important;}
.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li textarea {height:auto;line-height:1.3;font-size:13px;padding:3px;min-height: 36px;}
.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li input:not([type="submit"]) {font-size:13px;padding-left:4px;}
.cab-grid-sunset .cabGridPro form ul li .cabGridProDropSelect,.cab-grid-sunset .cabGridPro form ul li .cabGridProPickSelect {height:36px;}
.cab-grid-sunset .cabGridPro .chosen-container-single .chosen-single div b {background-position: 4px 8px;}
.cab-grid-sunset .cabGridPro form ul li .cabGridProDropSelect .chosen-drop,.cab-grid-sunset .cabGridPro form ul li .cabGridProPickSelect .chosen-drop {box-shadow: inset 1px -1px 1px rgba(0,0,0,0.13);border: 1px solid rgb(209,206,196);border-radius: 0;border-top: 0;margin-top:17px;color:#999;}
.cab-grid-sunset .cabGridPro form ul li .chosen-container .chosen-drop ul.chosen-results li {padding:5px 6px !important;color:#999;}
.cab-grid-sunset .cabGridPro form ul li .chosen-container .chosen-drop ul.chosen-results li.highlighted,.cab-grid-sunset .cabGridPro .cabGridProBookButton,.cab-grid-sunset .cabGridPro .cabGridProButton {color:#fff;background: #da4a26;background: -moz-linear-gradient(top, #da4a26 0%, #bb261d 100%);background: -webkit-linear-gradient(top, #da4a26 0%,#bb261d 100%);background: linear-gradient(to bottom, #da4a26 0%,#bb261d 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da4a26', endColorstr='#bb261d',GradientType=0 );}
.cab-grid-sunset .cabGridPro .cabGridProBookButton,.cab-grid-sunset .cabGridPro .cabGridProButton {text-shadow: 1px 1px 1px #000;color: #fff;box-shadow: 1px 1px 1px rgba(0,0,0,0.2);padding: 8px 25px !important;border:none;text-transform: uppercase;font-weight: bold;font-size: 28px;}
.cab-grid-sunset .cabGridPro .cabGridProPrice,.cab-grid-sunset .cabGridPro .cabGridProMessage {color: rgb(130, 25, 25) !important;text-shadow: 0px 1px 1px rgba(251, 251, 251, 0.65);}
.cab-grid-sunset .cabGridPro .cabGridVariation {margin: 6px 0 0 0;}
.cab-grid-sunset .cabGridPro .cabGridVariation a {border-bottom:none;border-radius:0 !important;background-color:rgba(255,255,255,0.5) !important;color:#999 !important;}
.cab-grid-sunset .cabGridPro .cabGridVariation a.active {background-color:#fff !important;box-shadow:none;color:#666 !important;}
.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li label {font-size: 13px;padding-bottom: 6px;text-transform: uppercase;font-weight: bold;}
.cab-grid-sunset .cabGridPro form ul li.cabGridProExtras ul li h3.cabGridProExtraTitle {background-color:rgb(203, 57, 34);}
.cab-grid-sunset .cabGridPro .cabGridProPriceDigCont {font-size:64px;line-height:64px;width: 100%;}
.cab-grid-sunset .cabGridPro .cabGridProPrice img {margin: 0;display: inline-block;clear: left;height: 61px;box-shadow: none !important;border: none !important;vertical-align: bottom;padding-right: 3%;}
.cab-grid-sunset .cabGridPro .cabGridProPrice .cabGridProPriceDigCont .cabGridProPriceDig {padding-right: 6%;}

  •  
  • 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 the CSS ‘content’ attribute to display text labels for the taxi journey input fields.

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

Custom CSS (entered in CabGrid Pro Options tab)
.cab-grid-transfers-layout {width:100%;}
.cab-grid-transfers-layout .cabGridPro {background:transparent;box-shadow:none;color:#fff !important;text-transform:uppercase !important;font-size:16px;max-width: 1170px !important;width:100% !important;margin: 0 auto;padding: 5px;}
.cab-grid-transfers-layout .cabGridPro 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*/
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProLuggage {display:none !important;}
/*Journey Details General*/
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails > li {display:inline-block;text-align:left;vertical-align: top;margin: 0 0.7%;padding: 0 !important;}
.cab-grid-transfers-layout .cabGridPro 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:16px !important;padding: 0 1px 0 3px !important;text-align: left;margin: 0 0 10px 0;color:#fff;line-height: 1;height:auto;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails > li input {display: block;height:47px;line-height:47px;padding: 0 12px;font-size: 15px;width: 100%;border: 1px solid #DFDFD0;color: #191F26;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background-image:none;background-color:#fff;}
/*Passengers Box*/
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers {width: 12%;min-width: 80px;max-width:125px;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers label {}
/*Return Box*/
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect {width:12%;height:auto;color:#fff;background-image:none;min-height:70px;position:relative;min-width:80px;max-width:125px;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {border:none;min-width:80px;text-indent:-9999px !important;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect input {padding:0;margin:0;width:auto;height:auto;display:none;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:before {text-indent:0px;position: absolute;content:'Return';text-transform:uppercase;display:block;font-size:16px !important;text-align: left;margin: 0 0 10px 0;color:#fff;line-height: 1;height:auto;width:100%;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:after {text-indent:0px;position: absolute;content:'\002714';display:block;width:100%;height:45px;line-height:45px;background-color:#fff;margin:0;padding:0;text-align: center;font-size:18px;margin-top: 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;border: 1px solid #DFDFD0;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:after {color: #000;}
/*TO/FROM boxes (general)*/
.cab-grid-transfers-layout .cabGridPro form ul li .cabGridProDropSelect,.cab-grid-transfers-layout .cabGridPro form ul li .cabGridProPickSelect {width: 100% !important;}
.cab-grid-transfers-layout .cabGridPro .chosen-container-single .chosen-single {height:47px;line-height:47px;font-size: 15px;border: 1px solid #DFDFD0;color: #191F26;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background:#fff;text-transform:uppercase;box-shadow: none;}
.cab-grid-transfers-layout .cabGridPro .chosen-container .chosen-drop {box-shadow:none;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li input.chosen-search-input {height:auto;padding:4px;line-height:1.2;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li .chosen-container-single .chosen-single div b {height:20px;margin-top: 10px;}
/*FROM box*/
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProFromSelect {width:30%;max-width:358px;min-width:120px;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProFromSelect label {}
/*FROM box*/
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProToSelect {width:30%;max-width:358px;min-width:120px;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProToSelect label {}
/*FLAGS*/
.cab-grid-transfers-layout .cabGridPro .cabGridProFlagCont {text-align: center;width: 100%;right:0;font-size: 185%;bottom: 0;}
/*PRICE*/
.cab-grid-transfers-layout .cabGridPro .cabGridProPrice {color:#fff;}
.cab-grid-transfers-layout .cabGridPro .cabGridProMessage,.cab-grid-transfers-layout .cabGridPro .cabGridProPriceDigCont .cabGridProRtnMsg {color:#fff;}
.cab-grid-transfers-layout .cabGridPro form ul li input[type="submit"],.cab-grid-transfers-layout .cabGridPro .cabGridProPrice .cabGridProBookButton,.cab-grid-transfers-layout .cabGridPro .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;}
.cab-grid-transfers-layout .cabGridPro form ul li input[type="submit"]:hover,.cab-grid-transfers-layout .cabGridPro .cabGridProPrice .cabGridProBookButton:hover,.cab-grid-transfers-layout .cabGridPro .cabGridProPayButton:hover {background:#fff !important;color:#191F26 !important;}
/*PRICE VARIATION*/
.cab-grid-transfers-layout .cabGridPro .cabGridVariation a {border-radius:2px !important;background: #fff !important;color: #4e4e4e;}
.cab-grid-transfers-layout .cabGridPro .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);}
/*BOOKING FORM*/
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProBookDetails {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 );
}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProBookDetails li textarea, .cab-grid-transfers-layout .cabGridPro form ul.cabGridProBookDetails li input {background:#fff;}
.cab-grid-transfers-layout .cabGridPro form ul.cabGridProBookDetails li label {text-transform:uppercase;}
/*Off*/
.cab-grid-transfers-layout .cabGridPro 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

Time Layout

This demo shows the Time mode. The destination drop-down is hidden with CSS (though it is preset to a fixed place name).

The HTML & shortcode would look like this: (pick-up locations are restricted to the ‘Tour’ group.)
<div class="cab-grid-custom-time-layout">[cabGridPro id="Tour" icons="light" layout="time" dest="Tour"]</div>
The CSS also adds a background image to indicate a tour-style…
.cab-grid-custom-time-layout .cabGridPro {background:url(/wp-content/uploads/2017/09/time-bg.jpg);background-size:cover;background-position:top right;background-repeat:no-repeat;min-height: 300px;}
.cab-grid-custom-time-layout .cabGridPro .cabGridProDropSelect {display:none;}
.cab-grid-custom-time-layout .cabGridPro form ul.cabGridProBookDetails {background:rgba(0,0,0,0.42);}

  •  
  • 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
.cab-grid-brushed-metal-layout {}
.cab-grid-brushed-metal-layout .cabGridPro {color:##4c4c4c;text-shadow: 1px 0px 1px rgba(0,0,0,0.5);background:url(http://demo.cabgrid.com/i/metal-bg.jpg),#c0bfc2;background-position: center center;background-repeat: repeat-y;box-shadow: 1px 11px 14px -3px rgba(0,0,0,.5);border-top: 1px solid rgba(152, 148, 148, 0.5);border-radius: 20px;max-width:900px;}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY {padding-bottom:36px;/*accommodates flags*/}
/*Passengers/Luggage/Tickets*/
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak) {display: inline-block;width:auto;}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak),.cab-grid-brushed-metal-layout .cabGridPro.cabGridProRestrictedWidth form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak) {width:49%;}
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProChosenLI {width:32%;min-width:220px;}
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProChosenLI select {width:100%;}
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li label {height: 34px;min-width: 27px;}
.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProLuggage input,.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProPassengers input,.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProTickets input {box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);font-size: 30px;text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.82);background: rgba(111, 111, 111, 0.26);color: #4a4a4a;text-align: center;}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul li.cabGridProLuggage input {text-align:left;background:url(https://cabgrid.com/wp-content/plugins/cab-grid-pro/i/luggage-icon-mobile.png),rgba(111, 111, 111, 0.26);background-position:right center;}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul li.cabGridProPassengers input {text-align:left;background:url(https://cabgrid.com/wp-content/plugins/cab-grid-pro/i/passenger-icon-mobile.png),rgba(111, 111, 111, 0.26);}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul li.cabGridProTickets input {text-align:left;background:url(https://cabgrid.com/wp-content/plugins/cab-grid-pro/i/ticket-icon.png),rgba(111, 111, 111, 0.26);}
/*Return box*/
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileN form ul li.cabGridProRtnSelect {height:37px;margin-left:12px;}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul li.cabGridProRtnSelect,.cab-grid-brushed-metal-layout .cabGridPro.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect {width:100% !important;}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul li.cabGridProRtnSelect label,.cab-grid-brushed-metal-layout .cabGridPro.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect label {margin-left:0;height:auto;width:100%;max-width:300px;box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);background: url(https://cabgrid.com/wp-content/plugins/cab-grid-pro/i/one-way-icon.png),rgba(111, 111, 111, 0.26);background-repeat:no-repeat;background-position:90% center;}
/*ORIGIN/DEST*/
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProChosenLI {width:100% !important;box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);background: rgba(111, 111, 111, 0.26);padding: 8px;}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProChosenLI label {height:auto;}
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li .chosen-container-single .chosen-single {background:rgba(111, 111, 111, 0.26);;box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);font-size: 20px;color: #444;line-height: 44px;height: 44px;}
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li .chosen-container .chosen-drop {background:url(http://demo.cabgrid.com/i/metal-bg.jpg),rgba(111, 111, 111, 0.26);box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);background-repeat:repeat-y;background-position:center;}
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li .chosen-container-single .chosen-search input[type="text"] {box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);background-color: rgba(111, 111, 111, 0.26);}
.cab-grid-brushed-metal-layout .cabGridPro .cabGridProJourneyDetails .chosen-container .chosen-results li.group-result {background: rgba(107, 107, 107, 0.5);color: #ffffff;}
.cab-grid-brushed-metal-layout .cabGridPro .cabGridProJourneyDetails .chosen-container .chosen-results li.highlighted {background:rgba(0,0,0,0.5);}
/*FLAGS*/
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY .cabGridProFlagCont {text-align: center;width: 100%;right:0;font-size: 185%;bottom: 0;}
/*PRICE*/
.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPrice {color:#fff;}
.cab-grid-brushed-metal-layout .cabGridPro .cabGridProMessage,.cab-grid-transfers-layout .cabGridPro .cabGridProPriceDigCont .cabGridProRtnMsg {color:#fff;}
.cab-grid-brushed-metal-layout .cabGridPro form ul li input[type="submit"],.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPrice .cabGridProBookButton,.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPayButton {min-width:250px;font-size:29px !important;font-weight:bold;box-shadow:none;border: none;text-transform: uppercase;border-radius: 8px;color: #fff !important;text-align: center;background: rgba(0,0,0,0.2) !important;height: 54px;line-height: 54px;padding: 0 14px !important;transition:all 0.8s ease;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.cab-grid-brushed-metal-layout .cabGridPro form ul li input[type="submit"]:hover,.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPrice .cabGridProBookButton:hover,.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPayButton:hover,.cab-grid-brushed-metal-layout .cabGridProDiscount button:hover {box-shadow:inset 2px 2px 4px rgba(0,0,0,0.4);}
/*PRICE VARIATION*/
.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation {}
.cab-grid-brushed-metal-layout .cabGridPro.cabGridProRestrictedWidth .cabGridVariation {background-color:transparent;border-radius:6px;}
.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation a {background-color: rgba(43, 43, 43, 0.2);text-decoration: none;color: #e0e0e0;text-shadow: 1px 1px 0px rgba(99, 96, 96, 0.4);}
.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileN .cabGridVariation a {}
.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation a:first-child {border-top-left-radius: 8px;border-bottom-left-radius: 4px;}
.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation a:last-child { border-top-right-radius: 8px;border-bottom-right-radius: 4px;}
.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation a.active {box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2);color: #000000;}
/*BOOKING FORM*/
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProBookDetails {text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.48);}
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProBookDetails li textarea,.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProBookDetails li input:not([type=checkbox]):not([type=radio]):not([type=submit]) {box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.82);background: rgba(111, 111, 111, 0.26);color: #4a4a4a;padding-left:4px;}
.cab-grid-brushed-metal-layout .cabGridProMessage {text-shadow: 1px 0px 1px rgba(0,0,0,0.5);}
.cab-grid-brushed-metal-layout .cabGridProDiscount button {box-shadow:none;border: none;text-transform: uppercase;border-radius: 5px;color: #fff !important;text-align: center;background: rgba(0,0,0,0.2) !important;transition:all 0.8s ease;}
/*EXTRAS*/
.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProExtras ul li {text-shadow:none;}
.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProExtras ul li h3.cabGridProExtraTitle {background-color: rgba(61, 62, 68, 0.68);}
.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProExtras ul li p.cabGridProExtraDesc {}
.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProExtras ul li p.cabGridProExtraPrice {}
/*Off*/
.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProOff {display:none;}

Brushed Metal Layout

This layout makes use of a background image to give a brushed metal appearance.

Responsive design means widget looks good at any size…

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

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.

It makes use of the Cab Grid Pro Shortcode’s new class attribute (v4.5.6+), meaning there is no need to enclose the shortcode in an HTML element.

The HTML & shortcode would look like this:
[cabGridPro class="cabGridProSquare"]
The CSS…
/*Square Style*/
.cabGridPro.cgpMobileN.cabGridProSquare {width:430px;background:#f5f5f5;border-radius:none;box-shadow:none;border-radius:0;padding:24px;font-size:16px;}
.cabGridProSquare .la-ball-fussion {color: #00005c;}
.cabGridProSquare .cabGridProPrice .cabGridProBookButton,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProChosenLI, .cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProRtnSelect,.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProTime, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProTickets, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProPassengers, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProLuggage, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProLuggageOn {border-radius:0;background:#fff;border:1px #d2d6de solid;width:100%;display:block;margin:0 0 15px 0 !important;padding: 8px 0 0 0 !important;height:42px;text-indent:0;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProChosenLI {height: auto !important;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProBreak {display:none !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li textarea:hover,.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li input[type="email"]:hover,.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li input[type="text"]:hover,.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li:hover,.cabGridProSquare .cabGridProPrice .cabGridProBookButton:hover,.cabGridProSquare .cabGridProPrice .cabGridProBookButton:focus,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation:hover,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation:focus,.cabGridPro.cgpMobileN.cabGridProSquare form>ul li:hover, .cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProJourneyDetails li:hover,.cabGridPro.cgpMobileN.cabGridProSquare form>ul li:focus, .cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProJourneyDetails li:focus {border-color:#fe9d00 !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProTime input, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProTickets input, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProPassengers input, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProLuggage input, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProLuggageOn input {border-radius:0;background:#fff;border:none;width:320px;outline:none;color:#555;font-size:16px;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li input:active {outline:none;}
.cabGridPro.cgpMobileN.cabGridProSquare .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;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {}
.cabGridPro.cgpMobileN.cabGridProSquare .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;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li .cabGridProDropSelect,.cabGridPro.cgpMobileN.cabGridProSquare form ul li .cabGridProPickSelect {width:100% !important;border:none;line-height:32px;background:transparent !important;}
.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container .chosen-drop .chosen-search,.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container .chosen-drop .chosen-results {display:none;}
.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container.chosen-with-drop .chosen-drop .chosen-search,.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container.chosen-with-drop .chosen-drop .chosen-results {display:block;}
.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container .chosen-drop,.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container .chosen-single,.cabGridPro.cgpMobileN.cabGridProSquare select {border:none !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;position:static !important;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation {text-align:left;margin: 0 0 2px 7px;padding: 0;width: 369px;background: #fff;border: 1px #d2d6de solid;height: 42px;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation a {width: 122px;padding:6px 0;border-radius:0 !important;background:#fff;line-height: 30px;height: 40px;color:#444;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation a:active,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation a:focus,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation a.active {background:#fafafa;color:#000;font-size: 75%;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProPriceDigCont {margin:15px 0 0 0;padding:0;}
.cabGridProSquare .cabGridProPrice .cabGridProBookButton,.cabGridProSquare .cabGridProButton,.cabGridProSquare .cabGridProBookButton,.cabGridProSquare .cabGridProButton:hover,.cabGridProSquare .cabGridProBookButton:hover,.cabGridPro.cgpMobileN.cabGridProSquare form ul li input[type="submit"] {width: 100%;max-width: 369px;box-shadow: none;margin: 15px auto !important;font-size: 20px;line-height: 30px;padding: 0 !important;border-radius:0;background:#fff;border:1px #d2d6de solid !important;min-width: 40px;height: 42px;}
.cabGridPro.cgpMobileN.cabGridProSquare form > ul > li,.cabGridPro.cgpMobileN.cabGridProSquare form ul li fieldset {padding: 0 !important;margin-left:0 !important;margin-right:0 !important;width: 100%;max-width:100%;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails {border-radius:0;border:none !important;padding:0 !important;margin:0 !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li {width:100% !important;max-width: 369px;margin-bottom:15px;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li input[type="email"],.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li input[type="text"],.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li textarea,.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li select {border-radius:0;width:100% !important;background:#fff !important;border:1px #d2d6de solid !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li.cabGridProDiscount input[type="text"] {width:75% !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProDiscount button,.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li input {border:1px #d2d6de solid !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li {border:1px #d2d6de solid !important;box-shadow:none !important;background:#fff !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li h3.cabGridProExtraTitle {background: rgba(111,111,111,0.1);padding:6px;height:auto;line-height:1.3;color:#555;text-shadow:none;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li input {width:3em !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li span.cabGridProIncrement {background: rgba(111,111,111,0.1);color:#555;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li.cabGridProSubmitButton {margin:15px 0 !important;padding:0 !important;text-align:center;max-width:100%;}

We can help...

Hire Us!
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

Airport meet and greet name plate print out

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

Set the priority/order of places and vehicles

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

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

Schedule Reminder Messages in Booking Management

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?

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.

Cab Grid Pro Destination Groups

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.