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 tutorial requirements:

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

  • WooCommerce plugin installed and activated

  • JetEngine plugin installed and activated

  • JetThemeCore plugin installed and activated

  • JetBooking plugin installed and activated

Booking Settings

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

setting woocommerce based mode for booking

The Booking hold time drop-down menu allows specifying the time for payment (here, 5 min).

After selecting, the link to Create your first product will be displayed. Click this link or navigate to the Products > Add New tab.

create your first product link

Adding New Products

Clicking the link leads to the New Product page with the preselected JetBooking product option from the Product data drop-down menu; in contrast, the Products > Add New tab redirection displays the default settings; therefore, users have to select the JetBooking product option from the Product data drop-down menu.

jetbooking product options

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 regular price.

woo product page

After selecting the booking dates and pressing the “Book Now” button, 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.

 view cart button of woo product page

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 does not differ from the checkout for regular WooCommerce products, and the order is collected as a regular WooCommerce order.

Booking and Order Managing

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

jetbooking dashboard with woo products orders

Besides, the WP Dashboard > WooCommerce > Orders tab to see all orders.

woo commerce product dashboard

Press the appropriate order to see its details or apply necessary actions.

woo commerce 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 > ThemeBuilder tab and create a new template for WooCommerce products.

woo template creation

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

сustom woo commerce product page

That’s all about expanding the WooCommerce functionality with the JetBooking plugin.

Was this article helpful?
YesNo

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.