↑ Back to top
While CSS skills will definitely come in handy, it’s important to note that it only affects design. To change the layout (e.g. using the calendar in a completely different area of the single product page), you’d still need to drag-and-drop the WC Bookings Form widget into place. This isn’t possible using CSS alone since the main WooCommerce Bookings extension doesn’t have a shortcode that can be used.
↑ Back to top
In order to access these settings in the Elementor widget, please ensure the following:
The Bookable Product has the Resources or Persons checkbox selected under Products > All Products > Your Bookable Product > Product Data
The Elementor template is set to preview the same product where those checkboxes have been enabled.
To change the product being previewed while designing your template, please follow these steps:
Navigate to Templates > Theme Builder > Your Bookable Template
Click on Panel Preview > Settings > Preview Settings and the type on the dropdown field to locate your bookable product containing the resources and persons
Once the bookable product preview has been updated, the respective setting areas in the widget will be active.
Change the product preview to see calendar design across different bookable products.
↑ Back to top
Yes – Since version 1.4, the Elementor Connector for WooCommerce Bookings widget can be used on standard pages as well as Elementor templates for Single Product Page. To use the booking form widget on a page, please specify the product ID in the content tab.
↑ Back to top
The easiest way is to group the type of products using product categories. These categories can then be used to filter the Elementor template display conditions.