fb-pixel

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 styled using the following classes. Add your custom CSS to the CSS Styling Box in the options tab of the Cab Grid Pro admin page.

.cabGridPro .cabGridVariation {/*button container*/}
.cabGridPro .cabGridVariation a {/*each button*/}
.cabGridPro .cabGridVariation a:active, .cabGridPro .cabGridVariation a:focus, .cabGridPro .cabGridVariation a.active {/*active button*/}

Hiding price variation buttons selectively

The price variation buttons will not show if you do not enter any formula in the ‘Price Variation 1’ or ‘Price Variation 2’ boxes. (i.e. leave them blank.)

However, there may be a requirement to hide these buttons only on specific instances of the Cab Grid Pro calculator. For example, if airport transfers do not offer price variations, but all other taxi journeys do.

The easiest way to achieve this is to enclose the Cab Grid Pro shortcode in an HTML element with a dedicated class. Then provide CSS styles for this instance directly through the CSS Styling Box. Let’s look at an example:

  1. In source editor mode add the shortcode to the page enclosed in an HTML element:
    <div class="hidePriceVariationButtons">[cabGridPro]</div>
  2. In the Cab Grid Pro admin page’s OPTIONS tab, add styling to the Styling (CSS) box:
    .hidePriceVariationButtons .cabGridPro .cabGridVariation {display:none !important;}

Demo

Standard Buttons hidden
  •  
  • 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
  •  
  • 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

Use Groups to selectively hide price variation buttons

Another way you might selectively hide or show the taxi price variation buttons is through the use of the Groups feature. When you add a Cab Grid Pro instance with a group ID, that calculator acquires the group name as class meaning you can target all instances that specify that a specific group.

For example, if you had an ‘Airports’ group, you could add the following CSS to the ‘Styling CSS’ box to hide the price variation buttons:
.cabGridProGroup-Airports .cabGridVariation {display:none !important;}

Tags: , , , , , ,

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