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:
- In source editor mode add the shortcode to the page enclosed in an HTML element:
<div class="hidePriceVariationButtons">[cabGridPro]</div> - 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 |
|---|---|
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;}
