Cab Grid Pro has the option to offer return journeys. How these are calculated and configured are the subject of a separate article on one-way or return taxi fare price calculations.

We have spent some time labouring over how best to depict this option to visitors using the Cab Grid price calculator. To keep things neat, an icon is preferred. This allows the calculator layout to render better across different devices and screens (responsively). We have settled on the current default icons.

However, along the way there have been alternatives that may be suited to different circumstance or requirements. Whilst these have been included in some of our Cab Grid styling demos, it is possible to only target the return icons. Here, we’ll share CSS code snippets required to render these alternatives.

These styles can be implemented by adding the accompanying CSS code to the ‘Styling (CSS)’ box found under the OPTIONS tab of the Cab Grid Pro plugin’s page in the WordPress admin section.

Text-based return button

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

This snippet hides the icons altogether and uses the label text. This text is translated so changes size in different languages and may need further styling.

.cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect {width: 45px;padding: 0 !important;margin: 0;background-image:none;background:transparent;text-indent:0;}
.cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect label {height:auto !important;float:none !important;text-indent: 0 !important;background-image: none !important;display: block !important;line-height: 1 !important;font-weight: bold !important;text-transform: uppercase;font-size: 9px !important;margin: 2px 0 0 0;text-align: center;padding: 2px !important;cursor:ew-resize;min-width:49px;}
.cabGridPro.cgpMobileY .cabGridProJourneyDetails li.cabGridProRtnSelect {display:block;clear:both;width:88%;margin:10px auto;}
.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)}

Tick Box with label

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

This snippet mimics a tick-box and changes the label text.

.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect {height:auto;background-image:none;position:relative;min-width:80px;max-width:160px;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {background-image:none !important;text-transform:uppercase !important;display:inline-block !important;float:none !important;padding: 0 1px 0 3px !important;text-align: left;height:30px;line-height:30px;border:none;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect input {background-image:none;padding:0;margin:0;width:auto;height:auto;display:none;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:before {text-indent:0px;/*content:'\ ';*/color: #f7f7f7;content:'\002714';display:inline-block;width:27px;height:26px;line-height:26px;background-color:rgba(255,255,255,0.45);margin:0 9px 0 0;padding:0;text-align: center;font-size:18px;border-radius: 7px;border: 1px solid #aaa;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:before {color: #000;content:'\002714';}

One-way/Return Switch Icon

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

This snippet displays a slider switch style with labels.

.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect {background-image:none !important;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {text-transform:uppercase !important;display:inline-block !important;float:none !important;padding: 0 !important;text-align: center;height:27px;line-height:27px;border:1px solid #aaa;border-radius:7px;background:rgba(255,255,255,0.45);min-width:82px;font-size:10px;color:#777;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:before {display:block;width:18px;height:17px;background:#2a62bc;color:#2a62bc;content:'.';border-radius:17px;margin:3px 4px;float:right;padding:0;line-height:17px;text-align:center;box-shadow:2px 2px 4px rgba(0,0,0,0.1);}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:before {float:left;background:#3dbc2a;color:#3dbc2a;}

Alternate Icons

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

This snippet implements an earlier “arrow head” style version of the one-way/return icons.

.cabGridPro form ul li.cabGridProRtnSelect {background-image:url(/wp-content/plugins/cab-grid-pro/i/one-way-icon.png);}
.cabGridPro.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect,.cabGridPro_widget .cabGridPro form ul li.cabGridProRtnSelect {background-image:url(/wp-content/plugins/cab-grid-pro/i/one-way-icon.png) !important;}
.cabGridPro.cgp-light form ul li.cabGridProRtnSelect,.cabGridPro.cgp-light.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect,.cabGridPro_widget .cabGridPro.cgp-light form ul li.cabGridProRtnSelect {background-image:url(/wp-content/plugins/cab-grid-pro/i/one-way-icon-light.png) !important;}
.cabGridPro form ul li.cabGridProRtnSelect.cabGridProRtnIcon,.cabGridPro.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect.cabGridProRtnIcon,.cabGridPro_widget .cabGridPro form ul li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:url(/wp-content/plugins/cab-grid-pro/i/return-icon.png) !important;}
.cabGridPro.cgp-light form ul li.cabGridProRtnSelect.cabGridProRtnIcon,.cabGridPro.cgp-light.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect.cabGridProRtnIcon,.cabGridPro_widget .cabGridPro.cgp-light form ul li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:url(/wp-content/plugins/cab-grid-pro/i/return-icon-light.png) !important;}

Built-in Icons

Here are the icons [currently] included with Cab Grid Pro

Icon URL (unless WordPress in sub-directory)
/wp-content/plugins/cab-grid-pro/i/one-way-icon.png
/wp-content/plugins/cab-grid-pro/i/return-icon.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon-light.png
/wp-content/plugins/cab-grid-pro/i/return-icon-light.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon2.png
/wp-content/plugins/cab-grid-pro/i/return-icon2.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon2-light.png
/wp-content/plugins/cab-grid-pro/i/return-icon2-light.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon3.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon3-light.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon3-light.png
/wp-content/plugins/cab-grid-pro/i/return-icon3-light.png

Tags: , ,

Pin It on Pinterest

  •  
  • 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 Cab Grid
x