Navigate to WordPress Dashboard > Bookings > Bookings > Settings. Unroll the Booking mode drop-down menu of the General tab and select the “WooCommerce based” option.

When you select the “WooCommerce based” option in the Booking mode drop-down menu, you don’t have to build a booking form in the JetBooking backend dashboard. Instead, it is added to the Single Product page via WooCommerce’s Add to Cart widget.

Warning

With the WooCommerce-based mode chosen, the Check-in/check-out dates field block in the form is not available. If you attempt to add it, you will see a message about the incompatibility of this block with the current builder.

Navigate to the Products > Add New tab, scroll it down, and select the “JetBooking product” option from the Product data drop-down menu.

This option turns on additional fields such as Pricing Settings (i.e., rates, seasonal/weekly prices), Custom Schedule, etc. These settings are globally configured on the booking settings page (Booking > Settings tab), but the settings configured on the Single Product are a priority.

Create a new product with the necessary data (i.e., seasonal prices, ratings, starting dates, offset dates, min/max days, custom schedules, etc.).

Press the “Publish” button to publish the product.

Press the permalink of the product for redirection to the product page.

The front-end view of the product page displays native fields of the Woocommerce product page, such as a regular price.

After selecting the booking dates and pressing the “Book Now” button (the Add to Cart widget), the product will be added to the user’s card and available for the time set at the Booking hold time drop-down menu of the General settings.

If necessary, add other units to the cart. Press the “View Cart” button to be redirected to the checkout page.

Press the “Proceed to checkout” button to place the order. The checkout process is the same as for regular WooCommerce products, and the order is collected as a WooCommerce order.

Navigate to WP Dashboard > Booking > Booking tab. This tab displays all orders.

Navigating to the WP Dashboard > WooCommerce > Orders tab also displays all orders.

Select an order to see its details or take order actions.

If users edit the order via the Booking dashboard (i.e., change its status), the Order list by the WooCommerce plugin will display these changes in the Order details.

Navigate to the Crocoblock > Theme Builder tab and create a new template for WooCommerce products.

Use the JetWooBuilder and JetProductGallery plugins to make the product page more user-friendly and apply appropriate widgets.