Standard Wordpress websites | Guide to using the HoHo Template Widget

Blanca Castillo
Blanca Castillo
  • Updated

Where do I find it?

WordPress backend > Appearance > Page Builder > HoHo Template Section

66b27d5f-12f2-4b2c-9549-b6cdb8dedf87.png

 

What does it mean?

The HoHo (Hop-on Hop-off) Template is a reusable section component that displays a row of tour cards on your website pages, such as home, city, or landing pages. It pulls tour data directly from TourCMS — including images, prices, ratings, and “What’s included” information — and presents it in a clear card layout.

The template supports two layout variants:

  • Standard – White cards on a light background, matching the default site style.

  • Grayline-branded – A distinctive yellow-highlighted style for Grayline-branded sections.

You can add multiple instances of this section on a single page, for example “Recommended Tours” or “Sightseeing Tours”, and configure each one independently.

a7c5e291-eaab-4648-a65c-2a02859f9f29.png

 

What should I do?

Follow these steps to add and configure the HoHo template on your pages:

  1. Go to your WordPress backend and navigate to Appearance > Widgets.

    a7c536fa-d3f2-4d5d-9541-6fbc15e304ab.png
  2. Add a new HoHo Template widget from the available blocks. Look for the block labelled “HoHo Template”.

    2a782592-5e3d-4c25-acc5-749ed2afc3fe.png
    59ad30ce-17b4-4323-af20-e54f87ca84a7.png
  3. If the section is already in your template, scroll down to the “HoHo Template Widget Area”.

    c934415f-9cc3-4f16-a583-54e622ed8f99.png
  4. Configure the section title and description. Click the section and enter a title and an optional description text. If you leave the description empty, the spacing will collapse automatically.

    81705bd1-9e6a-4656-8a9d-3d2f435e73de.png
    02fcb7c0-2cb7-447d-9342-8ea65a52e25c.png
  5. Choose your primary color. This color will apply to buttons and highlights.

    a3d3d9e9-57bc-4d3f-b73e-983103b03911.png
    4573faef-a8d1-42a5-a1a1-00d57b41a281.png
  6. Select the tours to display. Click + Add Row to add a tour to the template. You can browse and select tours from your TourCMS catalogue — images, prices, ratings, and other tour details are pulled in automatically.

    To find a tour, type at least 3 characters in the search field and select it from the results. Then:

    1. Enter the route names and assign a colour to each one.

    2. List the included items, separated by commas.

      90ece159-0ad2-4ff1-ac71-1cc88b4779f0.png
      f2e9c6cb-15f8-4ac7-be87-66c11373b0bf.png
  7. Repeat the previous step for each additional tour you want to include.

  8. Preview and save your page. Click outside the edit block to preview the template, then click Update in the top-right corner to save your changes.

    05efbc12-ae74-4b92-8906-c4d762bffc20.png

ℹ️

Tip: Each card automatically displays the tour image, a badge or label (for example “Best Seller” or “Special offers”), the tour name, the “from” price, a “More info” button, a short “What’s included” list, and the routes.

ℹ️

Responsive behaviour: The section automatically adapts to different screen sizes — 4 cards per row on desktop, 2–3 on tablet, and 1 card per row on mobile.

 

Good to know

  • The HoHo template is designed to work across all GLL and WhiteLabel websites.

  • All tour data is pulled dynamically from TourCMS — no manual data entry is needed for tour details.

  • If a tour has an active special offer in TourCMS, the card will automatically display the special offer styling instead of the regular badge.

  • If tours use quantity-based pricing, the price display will remain consistent with the product detail page.

  • The section will not render if no tours are available. If needed, a graceful fallback message, “No tours available at the moment”, will be shown.

  • Existing page caching will continue to work — the section does not depend on user-specific data.

FAQs

How many tours can I display in one section?

There is no strict limit on the number of tours. However, the section is optimised for 4 cards per row on desktop. If you add more than 4, they’ll be displayed in a slider.

Can I add multiple HoHo sections to the same page?

Yes. You can add as many instances as you need on a single page. Each section can have its own title, description, layout variant, and tour selection — for example, one for “Recommended Tours” and another for “Sightseeing Tours”.

What happens if I remove a tour from TourCMS that is configured in the section?

If a tour is no longer available in TourCMS, it will simply not appear in the section. The remaining cards will adjust their layout automatically.