<h2>Design Exceptional Product Pages for WooCommerce Bookings</h2>
<h2>Create unique layouts for your bookable products</h2>
<p>Ever wished you could let your creative side go wild and design the best-looking bookable product pages in <a href="https://woocommerce.com/products/woocommerce-bookings/" target="_blank" rel="noopener">WooCommerce Booking</a> and <a href="https://elementor.com" target="_blank" rel="noopener">Elementor</a>? Your booking calendar should match the great looks and feel of the rest of your website.  Use <strong>Elementor Connector for WooCommerce Bookings </strong>to create a matching booking calendar.</p>
<p>With Elementor Connector, you have full control of bookable single product-page designs with a dedicated Elementor widget. This booking-form widget allows you to take your booking page designs to the next level with specific controls for colors, backgrounds, layouts, paddings and margins, fonts, and borders.</p>
<div class="wp-block-coblocks-alert woo-sc-box info" aria-label="Alert section">
<p class="wp-block-coblocks-alert__text"><strong>Note:</strong> This plugin also forms part of the <a href="https://woocommerce.com/products/elementor-connector/">Elementor Connector bundle</a>, which includes the WooCommerce Bookings widgets and many more → <strong>All for the same price!</strong></p>
</div>
<h3>Features</h3>
<p><strong>Custom layouts for bookable product pages</strong></p>
<p><img class="alignnone wp-image-7281871 size-full" src="https://woocommerce.com/wp-content/uploads/2021/01/elementor-connector-for-woocommerce-bookings-editor-1.png" alt="An example of designing the calendar section of WooCommerce Bookings on the single product page" width="3518" height="1822" /></p>
<p><strong>Advanced options to design & style every part of the booking calendar</strong></p>
<p><img class="alignnone wp-image-7282096 size-full" src="https://woocommerce.com/wp-content/uploads/2021/01/elementor-connector-for-woocommerce-bookings-sc3.png" alt="An example of styling the calendar header and available dates in WooCommerce Bookings" width="980" height="505" /></p>
<h3>Why use Elementor Connector?</h3>
<ul>
<li>Store owners can change the layout and design of a single product page</li>
<li>Faster setup time—no more struggling with custom CSS and PHP or searching for compatible themes</li>
<li>Merges the functionality of two powerhouse-plugins: Elementor and WooCommerce Bookings</li>
<li>Easy drag and drop interface to move the calendar section to an area of your choice</li>
<li>Pre-designed templates for a professional touch</li>
<li>Far more control over WooCommerce Bookings designs—ensures a consistent brand and flow with the rest of the theme</li>
</ul>
<hr />
<h3>Requirements</h3>
<ul class="requirements">
<li>The latest version of <strong>Elementor</strong></li>
<li>The latest version of <a href="https://elementor.com/pro/" target="_blank" rel="noopener">Elementor Pro</a> (Only needed if changing the single product page template)</li>
<li>The latest version of <a href="https://woocommerce.com/products/woocommerce-bookings/" target="_blank" rel="noopener">WooCommerce Bookings</a></li>
<li>PHP 5.6+ is required</li>
</ul>
<p><a class="docs-link" style="color: #674399 !important" href="https://woocommerce.com/document/elementor-connector-for-woocommerce-bookings">View documentation for more info</a></p>
<h3>How to get started</h3>
<p>Ready to configure Elementor Connector for WooCommerce Bookings for your bookable products? Here’s how to get started.</p>
<ol>
<li>Download and install Elementor Connector in your WooCommerce store.</li>
<li>Navigate to <strong>Templates > Theme Builder > Your Single Product Template</strong> and drag the <strong>WC Bookings Form</strong> widget to an area of your choice.</li>
<li>Check out our <a href="https://woocommerce.com/document/elementor-connector-for-woocommerce-bookings/">extensive documentation</a> for any advanced setup help.</li>
</ol>
<hr />
<p><em>Need another reason to buy? WPExtend built Elementor Connector for WooCommerce Bookings. WPExtend are experienced, WooCommerce extension developers. Trust them to create high-quality code backed with first-class support.</em></p>

Elementor Connector for WooCommerce Bookings

<p>Connect two of the most powerful plugins in WooCommerce to design the Bookings website you’ve always dreamed of!</p>

<h2><b>Display availability of bookings with Blocks Editor</b></h2>
<p><span style="font-weight: 400">Sell more bookings by presenting a <strong>calendar</strong> or <strong>schedule</strong> of available slots in a page or post. Offer a curated selection or all of your products in a format that makes it easier for customers to quickly find a time and date that works for them and add to cart. </span></p>
<h3><b>Customize products to display</b></h3>
<p><span style="font-weight: 400">Choose which products are represented in your calendar or schedule:</span></p>
<ul class="wccom-tick-list-primary">
<li>All Products – Add all bookable products</li>
<li>Specific products – Select a list of individual products</li>
<li>Specific categories/resources – Select one or multiple categories or resources</li>
</ul>
<p><img class="alignnone wp-image-18734000599992 size-full" src="https://woocommerce.com/wp-content/uploads/2019/06/schedule-block-animation.gif" alt="Choose which products are represented in your calendar or schedule" width="1438" height="802" /></p>
<p> </p>
<h3><b>Schedule Block</b></h3>
<p><span style="font-weight: 400">Display product availability for a given day/week/month in a list format that allows customers to add directly to cart.</span></p>
<p><img class="alignnone wp-image-18734000599994 size-large" src="https://woocommerce.com/wp-content/uploads/2019/06/schedule-block-view-static.jpg?w=650" alt="Display product availability for a given day/week/month in a list format that allows customers to add directly to cart." width="650" height="435" /></p>
<p> </p>
<h3><b>Calendar Block</b></h3>
<p><span style="font-weight: 400">Display product availability for a given month in a calendar that allows customers to add directly to cart. The calendar view also provides additional information to customers via popup for each booking.</span></p>
<p><img class="alignnone wp-image-18734000599995 size-full" src="https://woocommerce.com/wp-content/uploads/2019/06/calendar-block-full.jpg" alt="Display product availability for a given month in a calendar that allows customers to add directly to cart." width="2180" height="2130" /></p>
<p> </p>
<p><b>Show Sold-Out Times</b></p>
<p><span style="font-weight: 400">Drive demand by showing sold-out time slots alongside availability.</span></p>
<p><img class="alignnone wp-image-18734000599996 size-full" src="https://woocommerce.com/wp-content/uploads/2019/06/calendar-block-with-sold-out.jpg" alt="Drive demand by showing sold-out time slots alongside availability." width="2157" height="626" /></p>
<h3><b>Give Bookings a boost</b></h3>
<p><span style="font-weight: 400">Craft the perfect customer experience by considering add-ons that other WooCommerce store owners use with WooCommerce Bookings.</span></p>
<ul>
<li><span style="font-weight: 400">Try our free</span> <a href="https://woocommerce.com/products/woocommerce-accommodation-bookings/"><b>Accommodation Bookings</b></a><span style="font-weight: 400"> add-on,</span> <span style="font-weight: 400">if you have a hotel or B&B</span></li>
<li><span style="font-weight: 400">Allow service providers to submit and manage offerings themselves using</span> <a href="https://woocommerce.com/products/product-vendors/"><b>Product Vendors</b></a></li>
</ul>

WooCommerce Bookings Availability

<p><span style="font-weight: 400">Sell more bookings by presenting a calendar or schedule of available slots in a page or post.</span></p>

Elementor Connector for WooCommerce Bookings vs WooCommerce Bookings Availability