Styling Demos

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

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.

Here is a full-width styling example. To create this, the Cab Grid shortcode is enclosed in an HTML element and given an custom id (#cabGridProFullWidthDemo). From here we can specifically target this instance of the Cab Grid Pro plugin and apply specific styles….

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

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...
  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...

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


No price found for this journey
Powered by TaxiMap
Loading...
  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey
Powered by TaxiMap
Loading...

We can help...

Hire Us!

Support Articles

Accelerated Mobile Pages (AMP) with Cab Grid

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

Cab Grid Pro Calculation Models

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

Text substitution syntax for messages shown to visitors

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

Receive booking data CSV

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

Booking Management Add-on

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

Stripe Integration

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

Custom Labels for Form Fields & Buttons

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

Cab Grid Pro Return Journey Calculations

In Cab Grid Pro version 4.0 there is a new option to enable automated return journey price calculation. This is found under the OPTIONS tab of the Cab Grid Pro Wordpress admin labelled, "Offer return journey option:" When set to, "YES", this option will display a...

Cab Grid Pro Extras

New in Cab Grid Pro v4.0 is a tab labelled, “Extras”. This allows an unlimited number of extra items (sundries) to be made available to customers when making a booking. This could include simple items, such as refreshments, or could be used to enable complex...

What’s New in Cab Grid Pro Version 4

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

Customising booking acknowledgement emails

Cab Grid Pro version 4.0 introduces the ability to compose bespoke booking acknowledgement messages emailed to your customer when the taxi booking form is submitted. This email is completely customisable with details entered on the taxi booking form. On the Cab Grid...

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. [As of Cab Grid Pro version 4.2 icons for these functions have been updated: (apply a formula) (copy from vehicle) ] Cab Grid Pro...

Price Calculator Language Options

Visitors can choose the language for the Cab Grid fare price calculator independently of the language set by Wordpress using flag icons shown on the visitor portion of the plugin.

Auto-enter return prices

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

Styling/hiding Price Variation Buttons

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

How to troubleshoot styling issues

When you implement Cab Grid on your web page it will render using the default styling we provide. You can modify the appearance yourself through the Styling (CSS) section under the OPTIONS tab. However, outside factors (such as theme or plugin styling) can themselves...

Address Autocomplete

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

Covering other taxi journeys

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

Troubleshooting – Cab Grid not working?

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

Managing taxi booking requests

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

Updating Cab Grid Pro (version 2 – 4.0)

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

Cab Grid Pro Shortcode Attributes

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

Cab Grid Translations

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

Cab Grid Pro Destination Groups

The new Cab Grid Pro groups feature allows you to assign each area (destination or origin location) to one or more custom groups. Different versions (or instances) of the Cab Grid price calculator can then be loaded in different places on a website.

Basic Style Changes using CSS

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

Custom Booking Form Fields

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

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

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

Origin and Destination

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

Price variations and formulae

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

Auto-update error

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

High Number of Areas (Places)

Cab Grid Pro allows an unlimited number of places to be added. However, a very high number of areas can put a strain on your web browser and computer. This is because the price table for each vehicle can contain up to the square of the number of places... For example,...

What is the Cab Grid WordPress Plugin?

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

Cab Grid Basic Edition Install & Setup Video Tutorial

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

Error: Email Sending Problem

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

Pin It on Pinterest

Share This

Share this post with your friends!