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.

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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.

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Standard PEAK ACCOUNT

- Standard11
- Chauffeur22
- MPV64
- Minibus129
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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);}

Standard PEAK ACCOUNT

Tickets
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

We can write your custom CSS

Hire Us!

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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;}

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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).

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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%;}

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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;}

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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);}

Standard PEAK ACCOUNT

Passengers
Luggage
hours
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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…

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- 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!

How to send a payment link with the booking acknowledgement message

by TaxiMap | Jul 16, 2023

Want to include a payment link in the booking acknowledgement email. There are number of ways you can construct a payment link and include it in the acknowledgement email. Here’s a couple of suggestions…

Reset all prices, places, vehicle or extras with one click

by TaxiMap | Feb 12, 2023

CabGrid Pro version 5.9.4 adds an option to reset all prices, places, vehicles and extras with one click.

Require Payment After Taxi Booking Submitted

by TaxiMap | Oct 2, 2022

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

by TaxiMap | Aug 31, 2022

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

by TaxiMap | Aug 31, 2022

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

by TaxiMap | Jul 2, 2022

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

Highlighting Price Variation Options

by TaxiMap | Apr 21, 2022

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

by TaxiMap | Mar 26, 2022

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…

Add your logo to taxi booking notification emails

by TaxiMap | Feb 9, 2022

How to add a logo or image to notification emails sent from CabGrid Pro or the CabGrid Booking Management add-on

Invoicing, Accounting and Bookkeeping with CabGrid

by TaxiMap | Nov 28, 2021

CabGrid features to help with accounting, bookkeeping and invoicing customers.

Booking form unexpectedly shows mandatory information missing

by TaxiMap | Oct 9, 2021

Problem: when trying to summit a booking, the message “Mandatory information missing or invalid. Invalid fields have been highlighted.” always appears, even when all required fields are completed.

Hook CabGrid events on the front end with JavaScript

by TaxiMap | May 20, 2021

How to manipulate the CabGrid calculator and booking form when certain events occur through Javascript.

How to use CabGrid Pro v5 Alt Styles

by TaxiMap | Nov 22, 2020

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

by TaxiMap | Sep 16, 2020

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…

Re-initialise/Reset CabGrid Pro to solve layout or loading errors

by TaxiMap | Aug 1, 2020

In certain circumstances the CabGrid Pro can fail to load required files after an update. This can result in the taxi calculator losing its layout and styling. This article provides details on how to reset and re-initialise CabGrid Pro.

Cash Payment Options

by TaxiMap | Jul 10, 2020

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

by TaxiMap | Apr 11, 2020

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

by TaxiMap | Jan 29, 2020

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.

Disable Floating Price Bar with CSS

by TaxiMap | Sep 3, 2019

How to disable the floating price banner displayed in the footer using CSS

Cache/Optimisation Plugin Configuration Recommendations for Cab Grid

by TaxiMap | Jul 4, 2019

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

by TaxiMap | Jun 23, 2019

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

by TaxiMap | Jun 23, 2019

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.

Dedicated CabGrid Blocks for the WordPress Gutenberg Editor

by TaxiMap | Jun 5, 2019

CabGrid now includes dedicated Gutenberg editor blocks that allow the basic taxi price calculator, the CabGrid Pro calculator and booking form, and the CabGrid Pro Price Table to be positioned as block items within any WordPress post or page.

Make Built-in Cab Grid Pro Booking Form Fields Optional

by TaxiMap | May 29, 2019

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.

Adjusting Cab Grid Taxi Fare Prices Based on the Number of Passengers

by TaxiMap | May 15, 2019

This article explores ways taxi fare prices provided by Cab Grid may be adjusted based on the number of passengers, for example, when applying a surcharge for extra passengers or a discount for large groups.

Cab Grid is Built for Speed

by TaxiMap | May 9, 2019

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

by TaxiMap | May 7, 2019

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

by TaxiMap | May 6, 2019

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.

Advanced Destination Selector on Mobile

by TaxiMap | Apr 26, 2019

Force mobile devices to use the searchable destination select box offered with the Cab Grid Pro desktop experience…

Hide Unsupported Destinations

by TaxiMap | Mar 29, 2019

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

by TaxiMap | Mar 14, 2019

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

by TaxiMap | Feb 20, 2019

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

by TaxiMap | Feb 19, 2019

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

by TaxiMap | Feb 13, 2019

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

Tool-Tips to help customers complete booking form

by TaxiMap | Feb 12, 2019

Tool-tips can be enabled to provide customers with further assistance when calculating a journey price and completing the booking form…

WSPay Add-on Set up

by TaxiMap | Jan 23, 2019

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

by TaxiMap | Jan 11, 2019

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

How to use Send Grid & WP Mail SMTP to improve taxi booking notification email deliverability

by TaxiMap | Dec 3, 2018

CabGrid sends notifications to both customers and administrators via email (and text). Use Send Grid and WP Mail SMTP to improve email deliverability. This article discusses steps to configure.

Individual WordPress User Discounts in Cab Grid Pro

by TaxiMap | Oct 25, 2018

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

by TaxiMap | Oct 5, 2018

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

by TaxiMap | Oct 5, 2018

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

by TaxiMap | Oct 1, 2018

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

by TaxiMap | Sep 20, 2018

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

by TaxiMap | Sep 13, 2018

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.

Embed Cab Grid in External Web Sites or Services (e.g. Facebook)

by TaxiMap | Sep 12, 2018

Cab Grid Pro v5 provides a template that allows the taxi price calculator or taxi price table to be embedded in another website or application such as Facebook. This article describes the steps to generate the Cab Grid Pro embed page.

Combine Calculation Modes in Cab Grid Pro v5

by TaxiMap | Sep 8, 2018

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.

Import & Export Fare Price and Destination Data to Cab Grid Pro

by TaxiMap | Sep 7, 2018

Location and price data can be imported to Cab Grid Pro from an external source (CSV file). This can be especially useful if there are large number of places and prices.

Display a fare price table using [cabGridProTable] shortcode

by TaxiMap | Sep 7, 2018

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

by TaxiMap | Sep 6, 2018

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+

by TaxiMap | Sep 5, 2018

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

URL Rewrite Redirects in Cab Grid Pro v5

by TaxiMap | Sep 1, 2018

Cab Grid Pro v5 makes use of URL rewrite functionality to...

Email deliverability – How to insure booking notifications get through

by TaxiMap | Sep 1, 2018

In some circumstances, email messages sent from Cab Grid (WordPress) can not get through. There are a number of reasons for this. This article attempts to address some common email deliverability issues.

SMS Text Messaging with Twilio in Cab Grid Pro v5+

by TaxiMap | Aug 30, 2018

How to configure Cab Grid Pro version 5 (or higher) and Twilio to send SMS text messages in various circumstances, including booking requests, confirmation or cancellation messages, and more.

Schedule Reminder Messages in Booking Management

by TaxiMap | Aug 24, 2018

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.

Cab Grid and the WordPress Gutenberg Editor

by TaxiMap | Aug 3, 2018

This article examines Gutenberg’s impact on the Cab Grid price calculator plugin for WordPress. At this time, it appears that Cab Grid functionality remains unaffected…

What’s New in Cab Grid Pro Version 5.0?

by TaxiMap | Jul 27, 2018

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

by TaxiMap | Jul 24, 2018

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

by TaxiMap | Jul 24, 2018

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.

Date Picker Formatting – How the date and time are displayed in the booking form

by TaxiMap | Jul 23, 2018

How to manipulate date and time formatting displayed to the customer on the CabGrid Pro taxi booking form.

Multiple Calculation Modes on a Single Page

by TaxiMap | Jun 14, 2018

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.

Accepting iDEAL, Sofort & Giropay payments with the Stripe Add-on for Cab Grid Pro

by TaxiMap | Jun 12, 2018

Version 2.0 of the Stripe Add-on allows customers to make payments using various funding sources in addition to credit cards or debit cards. These include iDEAL, Sofort & Giropay, popular in some European countries. These are known as ‘sources’ by Stripe.

Cab Grid Pro Stripe Payment Processing Add-on v2 Configuration

by TaxiMap | Jun 6, 2018

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?

by TaxiMap | May 25, 2018

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

by TaxiMap | May 4, 2018

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

by TaxiMap | May 3, 2018

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

by TaxiMap | Apr 23, 2018

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…

What’s New in v2 of the Taxi Booking Management Add-on for the Cab Grid WordPress Plugin

by TaxiMap | Apr 7, 2018

Version 2 of our taxi booking management system provides a calendar view with daily itinerary, functionality to add, edit & duplicate bookings from the admin, checking for timing conflicts with other bookings, and customisable messaging for actions such as accept, decline, cancel or paid.

Migrating Cab Grid to another web site

by TaxiMap | Mar 27, 2018

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.

Google Analytics Event Tracking in Cab Grid Pro

by TaxiMap | Mar 14, 2018

Cab Grid Pro offers the ability to track interactions with users through Google Analytics. This means usage of the plugin is reported alongside other statistics in Google Analytics.

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

by TaxiMap | Jan 23, 2018

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

by TaxiMap | Jan 18, 2018

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

by TaxiMap | Jan 12, 2018

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?

by TaxiMap | Nov 4, 2017

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

by TaxiMap | Sep 8, 2017

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

by TaxiMap | Aug 31, 2017

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

by TaxiMap | Aug 28, 2017

[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

by TaxiMap | Aug 24, 2017

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

by TaxiMap | Aug 11, 2017

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

by TaxiMap | Jul 29, 2017

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

by TaxiMap | Jul 14, 2017

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

Controlling booking request dates in Cab Grid Pro

by TaxiMap | Jul 10, 2017

Do not allow booking on certain dates, specify a minimum time before booking (lead time), and a latest booking date.

Providing Custom Translations for Cab Grid Messages & Labels

by TaxiMap | Jul 1, 2017

This article describes the syntax required to have content entered in the Cab Grid Pro admin pages translated to the visitor’s (or site’s) preferred language.

Cab Grid Pro Return Journey Calculations

by TaxiMap | Jun 27, 2017

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

by TaxiMap | Jun 26, 2017

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.

Notes for upgrading to Cab Grid Pro v4.0

by TaxiMap | Jun 25, 2017

If you are updating from an earlier version of Cab Grid Pro (3.8 or earlier) please read this article for details of changes that could effect your website.

What’s New in Cab Grid Pro Version 4

by TaxiMap | Jun 25, 2017

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

by TaxiMap | Jun 24, 2017

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

by TaxiMap | May 31, 2017

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

Language Options for the CabGrid Pro Taxi Price Calculator

by TaxiMap | Mar 9, 2017

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

by TaxiMap | Feb 27, 2017

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

by TaxiMap | Feb 16, 2017

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 CSS styling issues in CabGrid

by TaxiMap | Feb 8, 2017

Common CabGrid CSS styling problems and how to use a web browser Inspector to troubleshoot layout or appearance issues. e.g. Button text not visible or elements overlapping.

CabGrid Taxi Calculator Widgets

by TaxiMap | Dec 7, 2016

This article describes the two widgets provided for your sidebar in CabGrid Pro.

Address Autocomplete

by TaxiMap | Nov 23, 2016

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

by TaxiMap | Nov 9, 2016

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.

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

by TaxiMap | Nov 4, 2016

Version 3 of our taxi price calculator and booking plugin for WordPress is now available. This article details new features in the version 3 release.

Managing taxi booking requests

by TaxiMap | Jun 9, 2016

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)

by TaxiMap | Jun 1, 2016

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

by TaxiMap | May 26, 2016

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

by TaxiMap | May 21, 2016

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.

« Older Entries

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

Water

Need a Hand?

Green Squared Layout

Water

Water

Vehicle Layout

Ticket Layout

Water

We can write your custom CSS

Water

Background Image

Clean/Plain Layout

Water

Hide the luggage option

Water

Customizations from $49.99

Sunset Layout

Water

“Transfers” Theme Layout

Water

Time Layout

Water

Brushed Metal Layout

Water

Water

Water

Square Layout

We can help...