Allow customers to purchase or select additional products and services during booking…

Items are added under the “EXTRAS” tab on the CabGrid Pro page of the WordPress Admin. An unlimited number of extra items (sundries) can be made available to customers when making a booking. This could include simple items, such as refreshments, free items such as child seats, or could be used to enable complex customisations for a trip.

If extras have been added (and online booking is enabled), they will be made available at the bottom of the booking form.

Adding an extra is simple:

• Under the EXTRAS tab on the CabGrid Pro WordPress admin page enter an item name* under the ADD EXTRA heading
• Add a price for that item (set 0.00 to make the item free)
• Add a return price for the item (from version 5.8.7).**
• Add an (optional) description
• Set an (optional) maximum quantity that can be ordered by the customer during the booking
• Click the image field to add an (optional) image to represent the item
• Click the green ADD button

*The name of each Extra should be unique and distinct from any custom form fields to avoid conflicts when later referenced.
** This is the cost of the extra if required for both outbound and return journeys. It is only applied if the customer selects a return journey. It should be the total cost, not the cost of the return leg only. For example, if a bike rack costs $10.00 for a one-way journey, the return price might be $20.00.

Setting the order in which extras appear

This feature was introduced in CabGrid Pro v5.1.12.

By default, Extras appear alphabetically by title. So ‘Child Booster Seat’ would appear before ‘Water’ for example. This order can be adjusted under the CabGrid Pro OPTIONS tab. The ‘EXTRAS SORTING‘ drop-down provides the following options:

• Item Name (A-Z) – Extras will appear alphabetically sorted by item title from A (at the top) to Z (at the bottom)
• Item Name (Z-A) – Extras will appear alphabetically sorted by item title from Z (at the top) to A (at the bottom)
• Date added (Newest to Oldest) – Extras will appear in the order in which they were added with the last items added at the top.
  Note: Hover over an extra in the Extras table in the admin to find its ID. This will indicate its age, with the lowest ID number being the earliest added.
• Date added (Oldest to Newest) – Extras will appear in the order in which they were added with the earliest items added at the top.
• Price (Lowest to Highest) – Extras will appear with the lowest priced items at the top and the highest priced items at the bottom.
• Price (Highest to Lowest) – Extras will appear with the highest priced items at the top and the lowest priced items at the bottom.
• Max (Lowest to Highest) – Extras will appear sorted by the value entered in the ‘max’ column with the items with the lowest (closest to zero) value appearing at the top. This could be used as a way of defining a custom sort order for extras.
• Max (Highest to Lowest) – Extras will appear sorted by the value entered in the ‘max’ column with the items with the highest value appearing at the top.

Custom sorting techniques

There are other ways the order of extras can be manipulated.

• The Item Name can be prefixed with a number to define an order. This is useful in CabGrid Pro v4, which only sorts extras alphabetically. ​For example:
  1. Snacks
  2. Child Seat
  3. Tour Guide
  4. Bottled Water
• Use the ‘max‘ value to define a custom order (required CabGrid Pro v5). This option would only work where actual order quantities were largely irrelevant.
  As described above, the ‘Extras Sorting’ option would be set to ‘Max (Lowest to Highest)‘ or ‘Max (Highest to Lowest)‘ and values in order of preference entered. For example:
  • Snacks​​ (Max: 100)
  • Tour Guide (Max: 101)
  • Bottled Water (Max: 102)

Manipulating Extras with CSS Styling

Each Extra is added to the booking form and has a class name assigned referencing its ID in the code. This means extras can be selectively hidden, shown or styled using CSS.

The ID of an extra is found by hovering over the extra’s row in the Extras tab of the CabGrid Pro WordPress Admin. See illustration (right). The class name is made up of cabGridProExtra + ID. For example, “cabGridProExtra1” or “cabGridProExtra9”

Custom CSS is added to the ‘Styling CSS’ box under the CabGrid Pro OPTIONS tab. For example, an extra with ID ‘2’ could be hidden from all instances of CabGrid Pro using the following custom CSS: .cabGridProExtra2 {display:none;}

When an instance of CabGrid Pro has been assigned a specific ID or class, extras within this instance alone can be targeted. For example, if an instance of CabGrid Pro is assigned a class of ‘no-tour’ via shortcode: [cabGridPro class="no-tour"] Then the a ‘Tour Guide’ extra item with ID ‘3’ can be hidden by adding the following code to the Custom CSS box: .cabGridPro.no-tour .cabGridProExtra3 {display:none;}

Various other CSS classes are assigned to the CabGrid Pro instance depending on booking parameters. For example, the entire extras section of the booking form could be hidden or shown depending on which Price Variation is chosen. This example shows Extras only when Price Variation 1 is chosen:.cabGridPro .cabGridProExtras {display: none !important;}
.cabGridPro.cabGridCalcProp-priceVariant1 .cabGridProExtras {display: block !important;}

Referencing Extras in Messages

CabGrid Text Substitution Syntax can be used to display details of Extras in these messages:

• BOOKING SENT MESSAGE (shown after booking request submitted) under the CabGrid Pro OPTIONS tab
• EMAIL ACKNOWLEDGEMENT MESSAGE (email sent to customer when booking request submitted) under the CabGrid Pro OPTIONS tab
• Automated Booking Responses (email sent when booking updated) under the SETTINGS section of the BOOKINGS tab (Booking Management Add-on required):
  • ACCEPT/CONFIRM MESSAGE
  • DECLINE MESSAGE
  • PAID MESSAGE
  • CANCEL MESSAGE
• TWILIO SMS TEXT MESSAGES (SMS sent when booking updated) under the SETTINGS section of the BOOKINGS tab (Booking Management Add-on required):
  • ACCEPT/CONFIRM TEXT
  • DECLINE TEXT
  • CANCEL TEXT
  • PAID TEXT
• REMINDER MESSAGE (Automated reminder message sent ahead of booking schedule) under the SETTINGS section of the BOOKINGS tab (Booking Management Add-on required)

The exact item name must be used in the placeholder syntax to insert the number of items requested by the customer during booking. If no items are requested, a zero (0) will be shown in place.

Example 1:

To include details of an Extra named, “Bottled Water” the syntax included in a message field would be something like this:You have requested ///Bottled Water/// bottle(s) of water for your journey.

Example 2:

To include details of an Extra named, “Child Seat” the syntax included in a message field would be something like this:///Child Seat/// child seat(s) will be included.

Tags: calculation, css, extras, v4