Setup Google Calendar with WooCommerce Bookings and Appointments

It’s a real struggle to streamline bookings with your daily work. Marking dates on the calendar, managing your staff, working late at night to prepare for the next booking, etc. But things start getting out of hand when you get more than 100 bookings per month. It isn’t easy to keep up.

What you might need here is an automated calendar system that will keep you updated with the bookings. With the Google Sync feature, no matter where you are, you can navigate through the bookings right up from your phone. The WooCommerce Bookings and Appointments plugin enables this feature and, in this article, we will explain to you everything you need to know about it. 


How to set up Bookings on your WooCommerce Store?

First, you’d have to activate the WooCommerce Bookings and Appointments plugin. Once you have completed the setup process, you should see the following section under WordPress. 

Read more: Installation and activation process of the Woocommerce Bookings and Appointments Plugin.


woocommerce-bookings

Once you’re inside Bookings > Settings > Google Calendar Sync, you should be able to see the following screen.

google calendar sync

How to integrate your bookings with the Google Calendar?

Proceed with the following steps to get Calendar credentials and integrate WooCommerce Bookings with Google Calendar.

Get Google Calendar Credentials


google-calendar-credentials

  • Enter the Project Name & Click Create

project-name

Note: Creating a Project takes some time and you will be required to refresh the window once the project is created successfully. You will see the project listed under Manage Resources, after refreshing


  •  Search for Google Calendar API in the search bar at the top of the screen, as shown in the image below, and click on it

google-calendar-api

  • Click on Enable to enable Google Calendar API for your email
google-calendar-api

  • Click on Create Credentials

google calendar api

To create your credentials, follow the steps:

#Step 1: Credential Type

  1. Select Google Calendar API under Which API are you using?
  2. Select User Data, Click on Next 

google-calendar-api

#Step 2: OAuth Consent Screen

  1. Under App Information, enter the Application Name (for example Test App)
  2. Enter User support email
  3. Under the Developer Contact Information, enter the Email address
  4. Click Save and Continue 

OAuth consent screen

#Step 3: Scopes (optional)

  1. Click Save and Continue

credentials

#Step 4: OAuth Client ID

  1. Under OAuth Client ID, Select Web Application 
  2. Provide the name of the web application (eg: Web Client 1)

google-calendar-api

3. Add Authorized JavaScript origins: Enter your website URL under Authorized JavaScript origins. 

Note: Kindly do not remove the HTTP or HTTPS


add authorised javascript origins

4. Add Authorized redirect URIs: Enter your website URL under Authorised Redirect URIs while adding /wc-api/phive_booking_google_calendar/ after the URL.
For example – https://www.your_woo_store_url.com/wc-api/phive_booking_google_calendar/


add authorised redirect URI

Note:

While using the WooCommerce Bookings and Appointments plugin in case of multiple vendors with Dokan:

* Add /wc-api/phive_booking_google_calendar_dokan/ after the URL.

For example: https://www.your_woo_store_url.com/wc-api/phive_booking_google_calendar_dokan/

5. Click on Create

#Step 5: Download your Credentials

  1. Click on Done
  2. The page returns to the updated API Project window

download-credentials

  • Now Click On Credentials
  • Click on the Name of the application, as shown in the image below to get OAuth 2.0 client IDs
  • Click on your web application. Eg: Web client 1

credentials

  • You can see the details of the Client ID and Client secret of your Web Application as shown below. You will require these details in further steps.

client id & web application

  • Select OAuth Consent Screen
  • Under Test Users, click Add Users

test-users

  • Add your Gmail Id as Test User, Click Save

add user

Your Credentials are updated. Now you have Gmail ID, Client ID, and Client Secret.


Connect and Integrate with the WooCommerce Bookings plugin

After completing the above steps, you can finally check if everything is working fine. Within the plugin, click the Connect option to integrate with the entered credentials.

  • Enter the credentials: Client ID, Client Secret
  • Enable Google Calendar Sync

Integrate with the WooCommerce Bookings plugin

  • Scroll to the bottom of the page. Click on Save Changes, in order to store the credentials
  • Click on Connect

sync google calendar

  • To verify the credentials, click on Continue

verify-credentials

  • Again Click on Continue

access to google account

  • Your credentials are successfully authenticated, and Google Calendar is now connected.
google calendar successfully connected

Complete the Google Calendar Sync Setup

After connecting successfully, follow these steps to finalize the setup:

  • Under the Google Calendar for Bookings section in the plugin settings, select the calendar you want to sync.
  • If your calendar is not reflected yet, click on the Refresh Calendar List button.
google calendar sync

  • If you want to customize and display only particular bookings as events, you can do this under the “Booking Status Filter” as shown below
booking status filter

  • Check your Google Calendar to ensure that the bookings are now reflected as events.
check your google calendar

Final Thoughts!

There you have it! Your ultimate WooCommerce booking Google Calendar sync solution. Feel free to comment down below on how you feel about these solutions. And if you need any sort of help or have any queries, you can reach out to our customer support or check out the FAQ section.