How to Set up Google Calendar Sync using 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’s difficult 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 enable 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. And once you have completed the setup process, you should be able to 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.


woocommerce-bookings

How to get your Calender Id?

  • Open Google Calendar in the new tab
  • Select the calendar of your choice
  • Click on the three dots adjacent to your calendar, choose Settings and Sharing

Booking-calendar-id

  • Select Integrate Calendar Option
  • You can find your calendar id and copy it. We will require this information in further steps

integrate calendar

How to integrate your bookings with the Google Calendar?

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

Get Google Calendar Credentials


google-calendar-credentials

  • Enter Project Name & Click Create

project-name

Note: Creating a Project takes some time and you would require 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: do not remove the http or https
Eg: www.pluginhive.com


google-calendar-api

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.pluginhive.com/wc-api/phive_booking_google_calendar/


booking-calendar

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.pluginhive.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 Calender Id as Test User, Click Save

add user

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


Validate 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 Validate Credential option to verify the entered credentials.

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

Google Calendar Sync

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

google-calendar-sync

  • To verify the credentials, click on Continue

verify-credentials

  • Again Click on Continue

access to google account

  • Your credentials are successfully authenticated

credentials-authenticated

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 query, you can reach out to our customer support or check out the FAQ section.

You can also check out the review of our plugin by WP Buffs in their article, Most Used WordPress Bookings Plugins(Free+Premium).


Last Updated On September 22, 2022