Integration of WC Vendors Pro plugin with Booking & Appointment Plugin for WooCommerce

We have released 3 important features in v4.6.0 of Booking & Appointment Plugin for WooCommerce. Firstly, you can assign/book resources for different services and secondly, vendors can sell/book their products online due to compatibility with Dokan Pro plugin. Today we shall discuss the third main feature which is the integration with WC Vendors Pro plugin that works similar to Dokan Pro plugin where vendor’s bookable products can be booked and sold online.

Brief Description on WC Vendors Pro plugin

This is a feature-rich plugin that provides a platform for other sellers and vendors to sell all types of products on your WooCommerce store. It is a WooCommerce based Multi-Vendor plugin which facilitates efficient product management, shipping and branding options.

Note: WooCommerce v2.3 or greater is required to use this plugin.

Compatibility with our Booking & Appointment Plugin for WooCommerce

WC Vendors Pro plugin is made compatible with our Booking & Appointment Plugin for WooCommerce which makes all the vendor products enabled for booking. This is because you can add booking settings for all types of products and can also assign level of controls to different vendors.

Hence vendors can easily manage all their bookings and orders without having to access the WordPress admin dashboard. This makes selling and booking of products extremely efficient, thereby boosting online sales.

Setting Up WC Vendors Plugin

There are 2 versions of WC Vendors plugin namely Lite and Pro versions available in the market and you need to install and activate both plugins to start setting up the plugin.

Once you have activated the plugin, you will find WC Vendors option added under WooCommerce as shown below:

WC Vendors landing page 

As you can see in the above image, WC Vendors landing page has a complete list of settings in different tabs. The settings under General tab allow you to set % of commission, registration of vendors, set shop options like Vendor Shop Page URL (this will be yourdomain.com/vendors/store-name/) and display labels.

Most important and basic settings required for the setup are adding Capabilities, Pages and Pro settings.

After adding the General settings, the capabilities as desired should be assigned to the vendor from Capabilities tab. For now, we have enabled all of them as shown below:

Adding Capabilities settings

Now let us add pages that the vendor can access to manage his store. These pages are to be created and published manually using the shortcodes specified under Pages tab.

There are mainly 3 pages created under WooCommerce -> Pages namely Vendor Dashboard, Shop page and Orders page. These pages are then published so that you can manage the page configuration action under WC Vendors section.

To configure the pages, go to WooCommerce -> WC Vendors and select these newly created pages from the dropdown for each of the 3 pages and click on Save Page changes button as shown below:

Adding pages for vendor’s side

Since, we’re using the Pro version of the plugin, we need to create a dashboard page for the vendors from which they will be able to manage their store. For doing so, we will go to the Pro tab under WooCommerce -> WC Vendors.

Here again you need to create WC Pro Dashboard page using the shortcode and publish it under WooCommerce. Then under Pro tab, select this newly created page for Pro Dashboard Page setting from the dropdown and click on Save Pro changes button as shown below:

Adding page for Pro Dashboard Page

Once these pages are added you will have access to these pages in the vendor login.

In order to access the site as a vendor, we first need to add a user with the role ‘Vendor’.

For adding a vendor, you will have to go to Users->Add New page add all the user details like name, website and assign a role. You can assign a role to the user by clicking on Role dropdown and select Vendor from the displayed list as shown above.

Adding a vendor role

Now login using the Vendor’s credentials and you will be able to see above created pages displayed as shown below:

Vendor side displaying created pages

As you can see, the WC Pro Dashboard page is selected and hence the dashboard details appear.

Assigning vendor to a Product

Once a vendor has been created, you can assign this vendor to the products.

Assigning Vendor to existing product

Let us take an instance for this. Say you want to assign Vendor: tester to Hotel Paradise product, so go to the product and in the Vendor meta box select this vendor from the dropdown as shown below:

Assigning vendor to the product

Now this product will be displayed on the Vendor Dashboard under Products as shown below:

Product displayed on the vendors Products section

If you wish to edit the details of the product, you can do so by clicking the Edit button that appears on mouse hover as shown below:

Edit option on mouse hover

When you click on the Edit option, you will land on the Edit Product page. You can make suitable changes here and click the Save Changes button.

 Edit products page

Adding a new bookable product from the Vendor Dashboard

When you click on the Add product button on Vendor Dashboard, you get directed to the Add Product page where you add details of a new product.

Note: The product needs to be saved once before you are able to create booking settings.

Say for instance, a new product Fariyas Resort is created and booking type is selected as Multiple Nights. Add all the required details for this product as shown below:

Adding a new product from vendor’s side

Once you have added all product and booking details, you will now be able to configure bookings and place an order for this bookable product.

Booking a product

Now let us see how this newly created product can be booked. Go to View Store tab on Vendor Dashboard and you will see all the products displayed as shown below:

Vendor product displayed on the store

Moving ahead, let us book this product now. Click on Add to cart button to start the booking process. You will be taken to the Product details page as shown below:

Front end of the newly added product from vendor’s side

As you can see, Resort Fariyas is booked for 3 nights from 1st February to 4th February, 2018 for total cost of $3000. Click on the Add to cart button to book this product.

You will be taken to the Cart page where all your booking details will be displayed as shown below:

Cart page displaying details of the selected product

Here, if you do not wish to make any changes to the details, then click on the Proceed to checkout button to go to the Checkout page and place the order. Upon clicking the button, the Your order section will appear as shown as below:

Booking details on the Place order section

Recheck all the booking details before confirming the order. If all looks fine, click the Place order button to place the order and you will be taken to the Order Details page as shown below:

Order Details page showing booking details

This order once booked, will be seen under the Orders tab of Vendor Dashboard as shown below:

Placed order displayed under Orders section

Here as you can see, the order which we placed above is displayed with Order #2039 and its details. If you wish to check the details of this order, you need to mouse hover the Order Date and the options will be displayed as below:

View Order Details on mouse hover

Here if you click on the View Order Details option, details of Order #2039 will be displayed as shown below:

Order details displayed

Check Booking Details

Your order has been placed as shown above. Now to check this booking, go to the Booking tab and under View Bookings option, you will find this booking added as shown below:

View Bookings page

If you wish to make changes to this booking, you simply click the View & Edit icon as shown below:

Edit Booking option

When you click on the View & Edit button, you will get to the Edit Bookings section where you can make the desired change and click on Confirm Bookings button to save it.

Edit Bookings section

For our above placed order for Fariyas Resort for 3 nights, below is the calendar view of the booking shown under the Calendar View tab.

Calendar view of existing bookings

When you click on this event in the booking calendar, entire booking details will be displayed as shown below:

Booking details on calendar

This booking of the vendor’s product will also be added to the Booking section of the admin side as shown below:

Booking added on the admin’s side

Moreover, Vendors can also export their bookings to google calendar by following the product level gcal setup.

This is the entire booking process associated with vendor specific products when our Booking plugin is made compatible with the WC Vendors Pro plugin.

Conclusion

In the entire post, we discussed how the compatibility of WC Vendors Pro plugin with Booking & Appointment Plugin for WooCommerce has proved to enhance the performance of online bookings for vendor specific products.

With this integration, selling and booking products/services has become more efficient and this opportunity for vendors helps them increase sales and boost the overall online revenue.