{"id":41139,"date":"2023-08-22T10:27:47","date_gmt":"2023-08-22T10:27:47","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=41139"},"modified":"2026-07-03T20:41:52","modified_gmt":"2026-07-03T20:41:52","slug":"how-to-use-booking-with-woocommerce","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/","title":{"rendered":"How to Use Booking with WooCommerce Based Mode"},"content":{"rendered":"<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">The <i>JetBooking<\/i> plugin offers the \"Plain\" Booking mode, which allows the usage of forms with and without <i>WooCommerce<\/i> integration. Read more about such forms in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-create-a-booking-form\/\" target=\"_blank\" rel=\"noopener\"> <strong>How to Create a Booking Form<\/strong> <\/a> and <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-create-a-booking-form-with-woocommerce-integration\/\" target=\"_blank\" rel=\"noopener\"> <strong>How to Create a Booking Form with WooCommerce Integration<\/strong> <\/a> tutorials. In contrast, the \"WooCommerce based\" mode, described herein, allows users to enter the products metadata without creating forms.<\/p><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-the-jetbooking-settings\"><strong>Set the JetBooking Settings<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Navigate to <strong><em>WordPress Dashboard &gt; Bookings &gt; Settings<\/em><\/strong>. Unroll the <strong>Booking mode<\/strong> drop-down menu of the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetbooking-dashboard-overview\/#general\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>General<\/strong><\/a> tab and select the &#8220;WooCommerce based&#8221; option.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1-1024x640.webp\" alt=\"woocommerce based booking mode enabling\" class=\"wp-image-48484\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Next, move to the <strong>Advanced<\/strong> tab and enable the <strong>Automatically switch bookings statuses <\/strong>toggle to automatically change the &#8220;On hold&#8221; status of the unpaid orders. Here, we select the &#8220;Once Daily (1 day)&#8221; <strong>Switch interval<\/strong> to charge the default &#8220;On hold&#8221; <strong>Target Status(es)<\/strong> to the &#8220;Cancelled&#8221; <strong>New Status<\/strong>. Therefore, if users do not pay for the order within a day, this order will be cancelled automatically, and the date will become available for other bookings by another user.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/switching-the-booking-statuses.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/switching-the-booking-statuses-1024x640.webp\" alt=\"switching the booking statuses\" class=\"wp-image-48485\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/switching-the-booking-statuses-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/switching-the-booking-statuses-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/switching-the-booking-statuses-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/switching-the-booking-statuses-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/switching-the-booking-statuses-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/switching-the-booking-statuses.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>To learn more about configuring the booking settings in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetbooking-dashboard-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">JetBooking Dashboard Overview<\/a>.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">This mode combines the benefits of the <i>JetBooking<\/i> and <i>WooCommerce<\/i> plugins; in particular, all booking data (basic price, rates, seasonal prices) is taken from booking-related meta fields, and you can use WooCommerce available fields. Additionally, the mode allows you to avoid building a booking form in the JetBooking backend dashboard, because it turns off the <strong> Check-in\/Check-out dates <\/strong> field block of the <a href=\"https:\/\/jetformbuilder.com\" target=\"_blank\" rel=\"noopener\"> <i>JetFormBuilder<\/i> <\/a> plugin. Instead, it uses WooCommerce \"Products\" as a default <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/custom-post-type-overview\" target=\"_blank\" rel=\"noopener\"> <strong> Custom Post Type (CPT)<\/strong> <\/a>for booking instances and embeds a calendar for picking dates directly into the add-to-cart form on the Product&#39;s single page. Then, after placing an order on the checkout page and making a payment, a new booking will be added to the booking list in the <i> <strong> WordPress Dashboard &#62; Bookings <\/strong><\/i> tab once you complete the checkout. <\/p><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adjust-the-settings-common-for-all-productsnbsp\"><strong>Adjust the settings common for all products&nbsp;<\/strong><\/h3>\n\n\n\n<p>To specify settings common to all Products, unroll the needed <strong>Booking Settings <\/strong>(i.e., the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetbooking-dashboard-overview\/#configuration\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Configuration<\/strong><\/a> or <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetbooking-dashboard-overview\/#schedule\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Schedule<\/strong><\/a> tab). In the given case, we unroll the <strong>Configuration <\/strong>tab,<strong> <\/strong>pick the &#8220;Per Night (last booking day is not included)&#8221; <strong>Booking Period<\/strong>, and set the <strong>Min days<\/strong> and &#8220;Any day&#8221; <strong>End date<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/configuration-tab-of-the-booking-settings-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/configuration-tab-of-the-booking-settings-1-1024x640.webp\" alt=\"configuration tab of the booking settings\" class=\"wp-image-48490\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/configuration-tab-of-the-booking-settings-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/configuration-tab-of-the-booking-settings-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/configuration-tab-of-the-booking-settings-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/configuration-tab-of-the-booking-settings-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/configuration-tab-of-the-booking-settings-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/configuration-tab-of-the-booking-settings-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Then, we configure the available check in and check out <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-manage-days-and-weekends-in-booking\/\" target=\"_blank\" rel=\"noreferrer noopener\">weekdays<\/a> in the <strong>Schedule<\/strong> tab. Here, we activate the <strong>Timepicker<\/strong> toggle and set the <strong>Time Range<\/strong> during which bookings can be made in the <strong>Start <\/strong>and <strong>End<\/strong> fields.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/schedule-tab-of-the-booking-settings-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/schedule-tab-of-the-booking-settings-1-1024x640.webp\" alt=\"schedule tab of the booking settings\" class=\"wp-image-48492\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/schedule-tab-of-the-booking-settings-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/schedule-tab-of-the-booking-settings-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/schedule-tab-of-the-booking-settings-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/schedule-tab-of-the-booking-settings-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/schedule-tab-of-the-booking-settings-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/schedule-tab-of-the-booking-settings-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Read more about configuring the timepicker settings in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-manage-timepicker-for-check-in-check-out-in-jetbooking\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to manage timepicker for check-in\/check-out in JetBooking<\/a> tutorial.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-attributes-and-terms\"><strong>Create attributes and terms<\/strong><\/h3>\n\n\n\n<p>Navigate to the <strong><em>WordPress Dashboard &gt; Products &gt; Attributes<\/em><\/strong> page. \u041en this page, fill in the <strong>Name<\/strong> field and\/or the <strong>Slug<\/strong> field (if you omit the <strong>Slug<\/strong> field, it will be filled in automatically) and select the &#8220;Booking Service&#8221; option in the <strong>Type<\/strong> drop-down. After that, press the &#8220;<strong>Add attribute<\/strong>&#8221; button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-booking-service-type-attribute-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-booking-service-type-attribute-1-1024x640.webp\" alt=\"adding booking service type attribute\" class=\"wp-image-48493\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-booking-service-type-attribute-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-booking-service-type-attribute-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-booking-service-type-attribute-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-booking-service-type-attribute-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-booking-service-type-attribute-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-booking-service-type-attribute-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In this case, we create the &#8220;Meals&#8221; and &#8220;Extra services&#8221; attributes.<\/p>\n\n\n\n<p>After pressing the &#8220;<strong>Add attribute<\/strong>&#8221; button, the new attribute will appear in the list.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/attribute-page-of-the-woocommerce-products.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/attribute-page-of-the-woocommerce-products-1024x640.webp\" alt=\"attribute page of the woocommerce products\" class=\"wp-image-47865\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/attribute-page-of-the-woocommerce-products-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/attribute-page-of-the-woocommerce-products-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/attribute-page-of-the-woocommerce-products-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/attribute-page-of-the-woocommerce-products-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/attribute-page-of-the-woocommerce-products-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/attribute-page-of-the-woocommerce-products.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Click the &#8220;<strong>Configure terms<\/strong>&#8221; link on the right near the corresponding attribute, and then you will be redirected to the <strong>Edit attribute<\/strong> page. Here, type the <strong>Name<\/strong> of a new term, and the <strong>Slug<\/strong> field will be filled out automatically. Also, if needed, add the <strong>Description<\/strong>.<\/p>\n\n\n\n<p>Next, move to the <strong>Service Cost<\/strong> field and insert the value that will be used in further calculations. If required, type the text in the <strong>Cost Format<\/strong> field that will be displayed on the front end near the corresponding item. Then, tick the <strong>Multiply cost by guests count<\/strong> field to multiply the attribute price by the number of guests, and tick the <strong>Everyday service?<\/strong> field for the daily scheduled services. In the last step, press the &#8220;<strong>Update<\/strong>&#8221; button.<\/p>\n\n\n\n<p>In this case, we create the &#8220;Breakfast,&#8221; &#8220;Lunch,&#8221; and &#8220;Dinner&#8221; terms for the &#8220;Meals&#8221; attribute<strong> <\/strong>and the following terms for the &#8220;Extra services&#8221; attribute: &#8220;SPA\/Hammam\/Massage,&#8221; &#8220;Transfer in\/from station,&#8221; &#8220;Children\u2019s play kit,&#8221; and &#8220;Pet-friendly services.&#8221; Also, we add the corresponding values to the <strong>Service Cost <\/strong>and<strong> Cost Format<\/strong> text fields for all terms and tick the <strong>Multiply cost by guests count<\/strong> toggle for terms. The only exception is activating the <strong>Everyday service?<\/strong> toggle for the terms of the &#8220;Meals&#8221; attribute.&nbsp;<\/p>\n\n\n\n<p>In particular, for the &#8220;Lunch&#8221; term of the &#8220;Meals&#8221; attribute, we type its <strong>Name<\/strong> (\u201cLunch\u201d), and then the <strong>Slug<\/strong> field is filled automatically; after that, we fill out the <strong>Service Cost<\/strong> field (the &#8220;25&#8221; text), insert the text in <strong>Cost Format<\/strong> field (&#8220;%s per day&#8221;). In this case, the &#8220;%s&#8221; text is replaced with the value from the <strong>Service Cost<\/strong> field, and the &#8220;per day&#8221; text is added after thisdata. Then, we tick the <strong>Multiply cost by guests count<\/strong> and <strong>Everyday service?<\/strong> toggles.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-booking-attribute-term-options-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-booking-attribute-term-options-1-1024x640.webp\" alt=\"setting booking attribute term options\" class=\"wp-image-48495\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-booking-attribute-term-options-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-booking-attribute-term-options-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-booking-attribute-term-options-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-booking-attribute-term-options-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-booking-attribute-term-options-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-booking-attribute-term-options-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After completing these fields, we save the changes.<\/p>\n\n\n\n<p>Read the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-create-jetbooking-woocommerce-additional-services-attributes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How to Create JetBooking WooCommerce Additional Services Attributes<\/strong><\/a> for more details.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configure-the-attribute-settings-of-the-product\"><strong>Configure the attribute settings of the product<\/strong><\/h3>\n\n\n\n<p>Once completed editing terms, navigate to the <strong><em>WordPress Dashboard &gt; Products &gt; All Products <\/em><\/strong>tab and open the needed product from the list to edit it. Scroll down the<strong> Edit Product <\/strong>page to the <strong>Attributes<\/strong> section. Here, choose the needed <strong>Attribute<\/strong> from the <strong>Add existing<\/strong> drop-down list, and then you can press the &#8220;<strong>Select all<\/strong>&#8221; button under the <strong>Value(s)<\/strong> field.&nbsp;<\/p>\n\n\n\n<p>In this case, we first choose the &#8220;Meals&#8221; attribute and add the &#8220;Breakfast,&#8221; &#8220;Lunch,&#8221; and &#8220;Dinner&#8221; terms.<strong> <\/strong>So, we add all pre-created attributes and the corresponding terms. Since we intend all products to include some units and some guests can be invited, we tick the <strong>Has guests<\/strong> and <strong>Unit Selection<\/strong> controls.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-attributes-and-terms-for-displaying-on-a-booking-page-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-attributes-and-terms-for-displaying-on-a-booking-page-1-1024x640.webp\" alt=\"selecting attributes and terms for displaying on a booking page\" class=\"wp-image-48522\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-attributes-and-terms-for-displaying-on-a-booking-page-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-attributes-and-terms-for-displaying-on-a-booking-page-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-attributes-and-terms-for-displaying-on-a-booking-page-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-attributes-and-terms-for-displaying-on-a-booking-page-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-attributes-and-terms-for-displaying-on-a-booking-page-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-attributes-and-terms-for-displaying-on-a-booking-page-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After that, press the &#8220;<strong>Save attributes<\/strong>&#8221; button.<\/p>\n\n\n\n<p>Finally, after inserting all needed attributes and the corresponding terms,<strong> <\/strong>scroll up the page and click the &#8220;<strong>Update<\/strong>&#8221; button.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-a-product\"><strong>Create a Product<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>To create a new product, navigate to the <strong><em>WordPress Dashboard &gt; Products &gt; Add New<\/em><\/strong> path or click the &#8220;<strong>Create the first product<\/strong>&#8221; link below the <strong>Booking mode<\/strong> drop-down menu if you are in the <strong><em>WordPress Dashboard &gt; Bookings &gt; Settings &gt; General<\/em><\/strong> tab.<\/p>\n\n\n\n<p>Then, you will be directed to the <strong><em>Products &gt; Add New<\/em><\/strong> page.<\/p>\n\n\n\n<p>The <strong>Add new product<\/strong> page has the &#8220;Simple product&#8221; type selected by default in the <strong>Product data<\/strong> drop-down list.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/add-new-product-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/add-new-product-tab-1024x640.webp\" alt=\"add new product tab\" class=\"wp-image-48524\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/add-new-product-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/add-new-product-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/add-new-product-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/add-new-product-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/add-new-product-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/add-new-product-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>First, to benefit from the &#8220;WooCommerce based&#8221; mode functionality, choose the &#8220;JetBooking&#8221; <strong>Product data<\/strong>.<strong> <\/strong>Once chosen, this option activates the booking meta fields, such as <strong>Pricing Settings<\/strong> (e.g., rates, seasonal\/weekly prices), <strong>Custom Schedule<\/strong>, etc. These settings can be globally configured on the booking settings page (<strong><em>WordPress Dashboard &gt; Booking &gt; Settings<\/em><\/strong> tab), but the settings configured here are a priority.<\/p>\n\n\n\n<p><strong>guests<\/strong> and <strong>Unit Selection<\/strong> checkbox fields. In this case, we select the <strong>Has guests<\/strong> control to allow users to set the required number of guests.&nbsp;Also, we keep the <strong>Unit Selection<\/strong> control disabled, but tick the <strong>Allows the user to select the number of units to book<\/strong> checkbox field. In this case, the only field to select the number of units will be available on the front end. Unlike enabling this control, activating the <strong>Unit Selection<\/strong> control allows selecting only one unit on the front end. Enabling both controls simultaneously disables the ability to select the necessary units on the front end.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-jetbooking-product-type.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-jetbooking-product-type-1024x640.webp\" alt=\"selecting jetbooking product type\" class=\"wp-image-47869\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-jetbooking-product-type-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-jetbooking-product-type-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-jetbooking-product-type-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-jetbooking-product-type-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-jetbooking-product-type-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/selecting-jetbooking-product-type.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Then, the <strong>Guests<\/strong> tab will appear under the <strong>Attributes<\/strong> tab. Unroll it and type the minimum and maximum number of guests allowed in the <strong>Min guests<\/strong> and <strong>Max guests<\/strong> fields. In the last step, you can tick the<strong> Multiply cost by guest count<\/strong> checkbox to calculate the total cost for all guests.<\/p>\n\n\n\n<p>In this tutorial, we range the minimum and maximum guest numbers from &#8220;1&#8221; to &#8220;5&#8221; and tick the <strong>Multiply cost by guest count<\/strong> checkbox.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-the-number-of-guests-allowed-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-the-number-of-guests-allowed-1-1024x640.webp\" alt=\"setting the number of guests allowed\" class=\"wp-image-48528\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-the-number-of-guests-allowed-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-the-number-of-guests-allowed-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-the-number-of-guests-allowed-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-the-number-of-guests-allowed-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-the-number-of-guests-allowed-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-the-number-of-guests-allowed-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After that, we move to the <strong>Units manager<\/strong> section, press the &#8220;<strong>Manage Units<\/strong>&#8221; button, and add three units for this apartment.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-units-for-the-apartment-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-units-for-the-apartment-1-1024x640.webp\" alt=\"adding units for the apartment\" class=\"wp-image-48529\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-units-for-the-apartment-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-units-for-the-apartment-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-units-for-the-apartment-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-units-for-the-apartment-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-units-for-the-apartment-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-units-for-the-apartment-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Read the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-manage-units-via-the-wp-dashboard\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Manage Units via the WordPress Dashboard<\/a> tutorial to learn how to create and manage units via the WordPress Dashboard using the<em> JetBooking<\/em> plugin\u2019s functionality.<\/p>\n\n\n\n<p>Second, fill out the product <strong>Meta Fields<\/strong>. Here, we scroll the page up and add the <strong>Product name<\/strong>. Next, we fill out the <strong>Product description<\/strong>, <strong>Product Image<\/strong>, etc. Then, we move to the <strong>Pricing Settings<\/strong> block and type the needed value in the <strong>Price per 1 day\/night<\/strong> field. Then, we press the &#8220;<strong>Add weekend<\/strong>&#8221; button and insert the specific prices on weekends.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/adding-the-weekend-data.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/adding-the-weekend-data-1024x640.webp\" alt=\"\" class=\"wp-image-48532\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/adding-the-weekend-data-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/adding-the-weekend-data-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/adding-the-weekend-data-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/adding-the-weekend-data-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/adding-the-weekend-data-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/adding-the-weekend-data.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After that, we set the <strong>Seasonal prices<\/strong>; in particular, we insert the regular price of the season in the newly appeared <strong>Price per 1 day\/night<\/strong> field and pick the <strong>Start Date<\/strong> and <strong>End Date<\/strong> for this period.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/setting-the-seasonal-prices.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/setting-the-seasonal-prices-1024x640.webp\" alt=\"\" class=\"wp-image-48533\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/setting-the-seasonal-prices-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/setting-the-seasonal-prices-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/setting-the-seasonal-prices-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/setting-the-seasonal-prices-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/setting-the-seasonal-prices-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/setting-the-seasonal-prices.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Next, we press the &#8220;<strong>Add rates<\/strong>&#8221; button. In the newly appeared <strong>Set up advanced pricing rates<\/strong> pop-up, we specify the needed values in the <strong>From<\/strong> and <strong>Price<\/strong> fields. When completed, we click the &#8220;<strong>Save<\/strong>&#8221; button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-up-advanced-pricing-rate.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-up-advanced-pricing-rate-1024x640.webp\" alt=\"setting up advanced pricing rate\" class=\"wp-image-48535\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-up-advanced-pricing-rate-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-up-advanced-pricing-rate-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-up-advanced-pricing-rate-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-up-advanced-pricing-rate-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-up-advanced-pricing-rate-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/setting-up-advanced-pricing-rate.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Finally, we set specific options for this product: move the <strong>Custom Schedule<\/strong> block (activate the <strong>Use Custom Schedule<\/strong> toggle to set the <strong>Days Off<\/strong>) and the <strong>Date Picker Config<\/strong> block (enable the <strong>Date Picker Configuration<\/strong> toggle).<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/specific-product-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/specific-product-settings-1024x640.webp\" alt=\"\" class=\"wp-image-48536\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/specific-product-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/specific-product-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/specific-product-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/specific-product-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/specific-product-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/specific-product-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Once completed, press the &#8220;<strong>Publish\/Update<\/strong>&#8221; button.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-a-jetwoobuilder-template\"><strong>Add a JetWooBuilder Template<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>To provide better usability, we recommend setting the <a href=\"https:\/\/crocoblock.com\/plugins\/jetwoobuilder\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetWooBuilder<\/em><\/a> Single Product template to display products. To do this, we move to the <strong>JetWooBuilder Template Settings<\/strong> block and select a <strong>Custom Template<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-jetwoobuilder-template.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-jetwoobuilder-template-1024x640.webp\" alt=\"adding jetwoobuilder template\" class=\"wp-image-47887\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-jetwoobuilder-template-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-jetwoobuilder-template-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-jetwoobuilder-template-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-jetwoobuilder-template-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-jetwoobuilder-template-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/adding-jetwoobuilder-template.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>For an in-depth understanding of how to create a template using the <em>JetWooBuilder<\/em> and <a href=\"https:\/\/crocoblock.com\/plugins\/jetthemecore\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetThemeCore<\/em><\/a> plugins, activate the needed widgets, and manage their settings, read the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/jetwoobuilder-how-to-create-and-set-a-single-product-page-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a Single Product Page Template<\/a> tutorial. <\/p>\n\n\n\n<p>To customize the created template even further, you can use the <em>JetWooBuilder <\/em>and <em><a href=\"https:\/\/crocoblock.com\/plugins\/jetproductgallery\/\" target=\"_blank\" rel=\"noreferrer noopener\">JetProductGallery<\/a> <\/em>plugins. To do so, follow the steps described in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a Custom Single Product Page for WooCommerce-Based Booking<\/a> tutorial.<\/p>\n\n\n\n<p>Once completed, navigate to the top of the page and press the &#8220;<strong>Publish\/Update<\/strong>&#8221; button.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-the-result\"><strong>Check the Result<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Press the permalink of the product to redirect to its page.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/product-permalink.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/product-permalink-1024x640.webp\" alt=\"product permalink\" class=\"wp-image-47888\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/product-permalink-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/product-permalink-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/product-permalink-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/product-permalink-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/product-permalink-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/product-permalink.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The front-end view of the product page displays the native fields of the <em>WooCommerce<\/em> Product page. The <strong>Price<\/strong> range specified in the product settings will be shown as the minimal pricing rate (with the &#8220;From&#8221; text). Thus, the price is displayed dynamically. Also, this page displays the added attributes and the corresponding terms as checkboxes.<\/p>\n\n\n\n<p>If you use the <a href=\"https:\/\/crocoblock.com\/plugins\/jetwoobuilder\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetWooBuilder<\/em><\/a> plugin, the <strong>Price<\/strong> range will be displayed via the <strong>Single Price<\/strong> widget, as well as the <strong>Single Add to Cart<\/strong> widget will show the selected <strong>Attributes<\/strong> and <strong>Terms<\/strong> as checkboxes.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/price-range-field-and-attributes-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/price-range-field-and-attributes-on-the-front-end-1024x640.webp\" alt=\"price range field and attributes on the front end\" class=\"wp-image-48558\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/price-range-field-and-attributes-on-the-front-end-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/price-range-field-and-attributes-on-the-front-end-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/price-range-field-and-attributes-on-the-front-end-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/price-range-field-and-attributes-on-the-front-end-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/price-range-field-and-attributes-on-the-front-end-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/price-range-field-and-attributes-on-the-front-end.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After selecting the needed number of guests, units, booking dates, and additional services, the total price will be calculated and returned. Also, the \u201c<strong>BOOK NOW<\/strong>\u201d button will be active.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-total-booking-price-calculated-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-total-booking-price-calculated-on-the-front-end-1024x640.webp\" alt=\"\" class=\"wp-image-48554\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-total-booking-price-calculated-on-the-front-end-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-total-booking-price-calculated-on-the-front-end-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-total-booking-price-calculated-on-the-front-end-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-total-booking-price-calculated-on-the-front-end-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-total-booking-price-calculated-on-the-front-end-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-total-booking-price-calculated-on-the-front-end.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Then, press the &#8220;<strong>BOOK NOW<\/strong>&#8221; button to add the product to the cart for further processing with the order.<\/p>\n\n\n\n<p>Read the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetwoobuilder-dashboard-overview\/\"><strong>JetWooBuilder Dashboard Overview<\/strong><\/a> tutorial to know how to create different <em>JetWooBuilder <\/em>templates and assign them to products. Also, to build a shopping cart with all the needed widgets, read the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-cart-page-template\/\"><strong>How to Create a Cart Page Template<\/strong><\/a> tutorial.<\/p>\n\n\n\n<p>The Cart<strong> <\/strong>page displays the data separately for each unit (e.g., product title, check-in and check-out dates, selected number of guests, everyday services) with the multiplication sign on the number of days, other services, and the calculated total price.&nbsp;<\/p>\n\n\n\n<p> <\/p>\n\n\n\n<p>In this case, the Cart<strong> <\/strong>page displays the product title, check-in and check-out dates, selected number of guests, everyday services with the multiplication sign on the number of days, other services, and the calculated total price.&nbsp;<\/p>\n\n\n\n<p>We use &#8220;<a href=\"https:\/\/crocoblock.com\/dynamic-templates\/findero\/\" target=\"_blank\" rel=\"noreferrer noopener\">Findero<\/a>,&#8221; the pre-built <a href=\"https:\/\/crocoblock.com\/dynamic-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">Crocoblock\u2019s dynamic template<\/a>, which allows users to be redirected to the cart or continue purchases. So, click the needed button \u4e00 the &#8220;<strong>Continue shopping<\/strong>&#8221; button or the &#8220;<strong>Proceed to checkout<\/strong>&#8221; one.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-booking-item-added-to-the-cart.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-booking-item-added-to-the-cart-1024x640.webp\" alt=\"\" class=\"wp-image-48553\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-booking-item-added-to-the-cart-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-booking-item-added-to-the-cart-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-booking-item-added-to-the-cart-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-booking-item-added-to-the-cart-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-booking-item-added-to-the-cart-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/the-booking-item-added-to-the-cart.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>To place the order, we pressed the &#8220;<strong>Proceed to checkout<\/strong>&#8221; button.<\/p>\n\n\n\n<p>Next, you will be redirected to a Checkout page. Here, scroll down the page and, finally, click the &#8220;<strong>PLACE ORDER<\/strong>&#8221; button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/checkout-page.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/checkout-page-1024x640.webp\" alt=\"the checkout page\" class=\"wp-image-48551\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/checkout-page-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/checkout-page-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/checkout-page-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/checkout-page-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/checkout-page-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/checkout-page.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Since the order was received correctly, an &#8220;\u041erder received&#8221; page appears.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/placing-the-order.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/placing-the-order-1024x640.webp\" alt=\"the order received page\" class=\"wp-image-48549\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/placing-the-order-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/placing-the-order-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/placing-the-order-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/placing-the-order-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/placing-the-order-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/placing-the-order.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"manage-bookings-and-orders-via-dashboard\"><strong>Manage Bookings and Orders via Dashboard<\/strong><\/h3>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The &#8220;WooCommerce based&#8221; <strong>Booking mode<\/strong> allows booking orders to be collected in the <em>JetBooking<\/em> <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetbooking-dashboard-overview\/#bookings-tab\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bookings<\/strong><\/a> and <em>WooCommerce<\/em> <strong>Orders<\/strong> tabs and filled in the <strong>Upcoming Bookings<\/strong> section for a specific product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"manage-bookings-via-the-jetbooking-dashboard\"><strong>Manage bookings via the JetBooking dashboard<\/strong><\/h3>\n\n\n\n<p>Navigate to the <strong><em>WordPress Dashboard &gt; Bookings &gt; Bookings<\/em><\/strong> path, where all orders are displayed.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">The <i>JetBooking<\/i> plugin displays orders separated by units.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/order-in-the-booking-dashboard.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/order-in-the-booking-dashboard-1024x640.webp\" alt=\"order in the booking dashboard\" class=\"wp-image-48546\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/order-in-the-booking-dashboard-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/order-in-the-booking-dashboard-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/order-in-the-booking-dashboard-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/order-in-the-booking-dashboard-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/order-in-the-booking-dashboard-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/order-in-the-booking-dashboard.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>You can also view the ordered booking instance in the calendar or timeline by pressing the &#8220;<strong>Calendar<\/strong>&#8221; or &#8220;<strong>Timeline<\/strong>&#8221; button in the top right corner of the page.&nbsp;<\/p>\n\n\n\n<p>If you need to edit the booking record via the <strong>Booking<\/strong> dashboard (e.g., to change its status), press the &#8220;<strong>Edit<\/strong>&#8221; button. The pop-up allows changing the <strong>Status<\/strong>, <strong>Booking Item<\/strong>, <strong>Check In<\/strong>, and <strong>Check Out<\/strong> dates and <strong>Time range<\/strong> (if set), choosing the <strong>Guests<\/strong>, selecting the <strong>Booking Services<\/strong>, as well as the entered email.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/edit-booking-record-pop-up.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/edit-booking-record-pop-up-1024x640.webp\" alt=\"edit booking record pop-up\" class=\"wp-image-48544\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/edit-booking-record-pop-up-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/edit-booking-record-pop-up-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/edit-booking-record-pop-up-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/edit-booking-record-pop-up-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/edit-booking-record-pop-up-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/edit-booking-record-pop-up.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In this tutorial, we change the number of guests from two to three and enable the <strong>Recalculate order totals<\/strong> toggle. Also, the total price is recalculated, and the same changes are made in the corresponding <em>WooCommerce<\/em> orders. To save the changes, press the &#8220;<strong>Save<\/strong>&#8221; button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/recalculated-total-price-in-the-edit-booking-pop-up-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/recalculated-total-price-in-the-edit-booking-pop-up-1-1024x640.webp\" alt=\"recalculated total price in the edit booking pop-up\" class=\"wp-image-48542\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/recalculated-total-price-in-the-edit-booking-pop-up-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/recalculated-total-price-in-the-edit-booking-pop-up-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/recalculated-total-price-in-the-edit-booking-pop-up-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/recalculated-total-price-in-the-edit-booking-pop-up-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/recalculated-total-price-in-the-edit-booking-pop-up-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/recalculated-total-price-in-the-edit-booking-pop-up-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Additionally, you can press the order ID in the <strong>Edit<\/strong> <strong>Booking<\/strong> pop-up or in the <strong>Related Order<\/strong> column of the booking list to be redirected to the appropriate <em>WooCommerce<\/em> order.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-booking-order-list.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-booking-order-list-1024x640.webp\" alt=\"woocommerce product list\" class=\"wp-image-48541\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-booking-order-list-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-booking-order-list-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-booking-order-list-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-booking-order-list-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-booking-order-list-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-booking-order-list.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"manage-booking-orders-via-the-woocommerce-dashboard\"><strong>Manage booking orders via the WooCommerce dashboard<\/strong><\/h3>\n\n\n\n<p>Unroll to the <strong><em>WordPress Dashboard &gt; WooCommerce &gt; Orders<\/em><\/strong> tab. This tab also displays the orders.<\/p>\n\n\n\n<p>Select an order to see its details or take order actions. Select an order to see its details or take order actions. Also, to display the applied changes, press the &#8220;<strong>Recalculate<\/strong>&#8221; button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-product-details.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-product-details-1024x640.webp\" alt=\"woocommerce product details\" class=\"wp-image-48539\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-product-details-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-product-details-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-product-details-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-product-details-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-product-details-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/woocommerce-product-details.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"manage-the-products-upcoming-bookings-section\"><strong>Manage the product\u2019s Upcoming Bookings section<\/strong><\/h3>\n\n\n\n<p>After setting the booking order, it will be added to the <strong>Upcoming Bookings <\/strong>section for the booked product.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/product-upcoming-booking-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/product-upcoming-booking-field-1024x640.webp\" alt=\"product upcoming booking field\" class=\"wp-image-48538\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/product-upcoming-booking-field-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/product-upcoming-booking-field-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/product-upcoming-booking-field-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/product-upcoming-booking-field-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/product-upcoming-booking-field-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/product-upcoming-booking-field.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>That\u2019s all about implementing the <em>WooCommerce<\/em> functionality with the <em>JetBooking<\/em> plugin for your WordPress website.<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to enhance WooCommerce with JetBooking: set seasonal\/weekly prices, add services, manage units and guests, calculate total costs, and control orders via the JetBooking and WooCommerce dashboards.<\/p>\n","protected":false},"author":12,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[581],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use Booking with WooCommerce Based Mode \u4e00 JetBooking | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to enhance WooCommerce with JetBooking: set seasonal\/weekly prices, add services, manage units and guests, calculate total costs, and control orders via the JetBooking and WooCommerce dashboards.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Booking with WooCommerce Based Mode \u4e00 JetBooking | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to enhance WooCommerce with JetBooking: set seasonal\/weekly prices, add services, manage units and guests, calculate total costs, and control orders via the JetBooking and WooCommerce dashboards.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-03T20:41:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/\",\"name\":\"How to Use Booking with WooCommerce Based Mode \u4e00 JetBooking | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-08-22T10:27:47+00:00\",\"dateModified\":\"2026-07-03T20:41:52+00:00\",\"description\":\"Learn how to enhance WooCommerce with JetBooking: set seasonal\/weekly prices, add services, manage units and guests, calculate total costs, and control orders via the JetBooking and WooCommerce dashboards.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Booking with WooCommerce Based Mode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Booking with WooCommerce Based Mode \u4e00 JetBooking | Crocoblock","description":"Learn how to enhance WooCommerce with JetBooking: set seasonal\/weekly prices, add services, manage units and guests, calculate total costs, and control orders via the JetBooking and WooCommerce dashboards.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Booking with WooCommerce Based Mode \u4e00 JetBooking | Crocoblock","og_description":"Learn how to enhance WooCommerce with JetBooking: set seasonal\/weekly prices, add services, manage units and guests, calculate total costs, and control orders via the JetBooking and WooCommerce dashboards.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/","og_site_name":"Help Center","article_modified_time":"2026-07-03T20:41:52+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/08\/woocommerce-based-booking-mode-enabling-1-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/","name":"How to Use Booking with WooCommerce Based Mode \u4e00 JetBooking | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-08-22T10:27:47+00:00","dateModified":"2026-07-03T20:41:52+00:00","description":"Learn how to enhance WooCommerce with JetBooking: set seasonal\/weekly prices, add services, manage units and guests, calculate total costs, and control orders via the JetBooking and WooCommerce dashboards.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-use-booking-with-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Use Booking with WooCommerce Based Mode"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/41139"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/12"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=41139"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=41139"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=41139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}