View Product Page

Widgets and Gutenberg blocks

The plugin includes 2 widgets and 3 Gutenberg blocks to print the bookable product forms anywhere in your website.

1. Bookable product — widget and block

The ‘Bookable product’ widget and Gutenberg block allows you to print a list of bookable products.

Gutenberg bookging blocks

You can manage the selection of product shown by type:

  • Newest
  • Hand picked products
  • Product categories
  • Top rated

You can also decide the number of columns and rows you want to show in the block.

This block inherits the style options from the theme that you are using.

2. Booking form — block only

With the ‘Booking form’ block, you will be able to print a form for one specific product, so it can be displayed on any page on your site (not just the product page). In this way, the customer can select the dates and add the product to the cart in few clicks.

Booking form

Search for “Booking form” among the Gutenberg blocks.

Then, you will be able to select a product (you can type the product name) from the Block settings on the right hand side.

The block includes also the following options:

  • Show title: show the product name
  • Title heading tag: you can select the style of the title
  • Show rating: this shows the product rating
  • Show meta: enable to show the meta section, containing SKU, categories and tags.
  • Use full-width button: enable it if you want that the booking Add to cart button uses the full width of the block.

Style options are included as well, so you can customize:

  • Text color
  • Background color
  • Padding (px)
  • Border color
  • Border style: solid, dashed, dotted
  • Border thickness (px)
  • Border radius

3. Bookable product form — widget and block

This block or widget can be used to print the bookable form of the current product. This has to be used on a product page or in a template that will be rendered on the product page.

Bookable product form

You can enable/disable the following options:

  • Show rating
  • Use full-width button
  • Use compact view on mobile

Additionally, you can also edit the style options:

  • Text color
  • Background color
  • Padding (px)
  • Border color
  • Border style: solid, dashed, dotted
  • Border thickness (px)
  • Border radius