How to setup Booking & Appointment Plugin for WooCommerce with One Page Checkout plugin

In our previous posts, we had discussed different plugins to which our Booking & Appointment Plugin for WooCommerce was made compatible with. Today we shall focus on an additional plugin which has been added to the list and it is called the WooCommerce One Page Checkout plugin. This compatibility helps to complete the entire online purchase process along with adding booking details on a single page without having to switch to different sections of the website.

Abandoned cart issues have been the major hindrance in online business and one of the key reasons for cart abandonment is the long purchase process. Hence the functionality of One Page Checkout plugin and Booking & Appointment Plugin for WooCommerce together helps to reduce time and energy involved in the online booking process, thus making the customers have a wonderful online shopping experience.

How does this work?

Procedure to add One Page Checkout to a Page

We will be adding One Page Checkout to a page using graphical interface using the following steps:

1. Install WooCommerce One Page Checkout plugin

You need to first install the WooCommerce One Page Checkout plugin which can be downloaded from here. Once downloaded, activate the plugin from the Plugins page.

2. Go to Pages -> Add New Page

Now let us add One Page Checkout to a page. Hence, go to Pages in the left panel and click on Add New option. You will be taken to Add New Page to add the functionality.

3. Click on a small checkout icon which is One Page Checkout icon

One Page Checkout icon on Add New Page

On Add New Page, you will see One Page Checkout icon as shown above. Click on it to start adding the functionality.

4. Click on the Products field and type in the products you want to add

In the products field start typing in 3 characters of the existing products that you want to add to the One Page Checkout page named Quick Checkout. These products will be displayed all together on the same page and will be available for selection.

5. Add as many products you want to add to this page

You are allowed to add as many products as required and all will be displayed on the same page.

Note: Here we have added all the bookable products. You can have the combination of normal and bookable products.

Adding products to be displayed on the page

6. Select the appropriate template from the built-in list displayed

Once you have selected all the desired products, you can then add the template. There are different built-in templates listed as shown below and you can select the appropriate one for displaying the selected products.

Selecting template for products display

7. Click on the Select Shortcode button to add it to the created page

After you have selected the products to be added and the template in which these should be displayed, click on the Create Shortcode button. This will add a shortcode to the created page as shown below. Thus Quick Checkout is the new page created now.

Shortcode created for the products and template selected

8. Publish the page to make it live

Once all these steps are completed, click on Publish button to make this page live. Now you can have the products on a single page for the customers to select from and make their online booking. Newly created Quick Checkout page will appear on the front end with its products displayed as shown below:

Newly created Quick Checkout page 

The above image shows a single page checkout process where the selected products are listed in the template format which we had opted for. The Billing details and Your order sections are shown below the products on the same page.

9. Booking an order

Let us take an instance of booking Hotel Sinclair, Ooty from 19th to 22nd January 2018. For this click on the Book Now button next to the product and add in the booking dates in the calendar as shown below:

Note:  If the page has bookable products, only then Book Now button will appear to add the product to place the order with its booking details.

Booking dates added in the calendar

Now click on the Add Booking button to book the product. There will be a notification message that the product has been added as shown below:

New order added notification

10. Placing the Order and View Bookings

Now go below the product selection section on the same page to complete the booking for the selected product. Add the billing details and verify your order details before clicking the Place order button. If you wish to change your address or add any notes for this booking, then you can do so in this section. Once everything is completed, click on the Place order button to complete your booking as shown below:

Adding details and placing the order

Thus the order has been placed and you will be taken to the Order Confirmation page where your details will be displayed as shown below:

Order Confirmation page displaying booking details

This confirmed booking gets listed in the Booking section under View Bookings page. Booking ID is created and all its details are shown as below:

Booking details on View Booking page

Different Templates

You can configure One Page Checkout with other built-in templates where the product display for each of these templates will be different. We support 3 templates namely Product Table, Single Product and Pricing Table template. We have seen the product display using Product Table template in the above explained instance.

Now let us see how the products get displayed based on the other 2 templates.

Single Product:

Template selected is Single Product

Shop page using Single Product template will be displayed as below:

Shop page where products are displayed using Single Product template

Pricing Table:

Template selected is Pricing Table

Shop page using Pricing Table template will be displayed as below:

Shop page where products are displayed using Pricing Table template

Note: Product List template is not supported by us.

Conclusion

This post showed the procedure of adding One Page Checkout to a page using the graphical interface. The entire process of online booking is made extremely easy, convenient and pleasant. Moreover, we have also integrated our plugin to work with Variable Products, thus making it even more versatile. This compatibility of Booking & Appointment Plugin for WooCommerce with WooCommerce One Page Checkout plugin helps the customers to add their booking details on the same page for experiencing a hassle-free checkout process.

This in turn proves to be a boon to online sellers for curbing abandonment of shopping carts and boost their overall sales.