Help Center
How to Use Booking with WooCommerce

How to Use Booking with WooCommerce

The tutorial explains how to expand the WooCommerce functionality using the Jet Booking plugin to apply seasonal/weekly prices, rates, sailing dates, additional products, manage orders via the JetBooking dashboard, and more.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block Editor (Gutenberg)

  • WooCommerce plugin installed and activated

  • JetThemeCore plugin installed and activated

  • JetBooking plugin installed and activated

Booking Settings

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

setting woocommerce based mode for booking

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.


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.

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.).

booking settings of woo products
Things to know

Apply categories to the created new products to order the products on the JetBooking dashboard.

Press the “Publish” button to publish the product.

Product Page Functionality

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

woo product permalinks

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

woo product page

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.

woo product 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.

Booking and Order Managing

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

jetbooking dashboard with woo products orders

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

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

woocommerce product details

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.

WooCommerce Product Page Customization

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

woo template creation

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

custom woo commerce product page

That’s all about implementing the WooCommerce functionality with the JetBooking plugin and the Add to Cart widget.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.