WooCommerce Bookings Custom Google Calendar Integration

The WooCommerce Bookings extension allows you to synchronize your Bookings with a Google Calendar and supports two-way syncing.

You can connect your Google Calendar using your own app credentials following the steps below.

If you have a working connection but would like to switch to this method, please disconnect the other connection first.

Step 1: Google Developers Console ↑ Back to top

To use this integration, go to the Google Developers Console.

Step 2: Create Project ↑ Back to top

Go to Projects > Create Project button. A popup should appear and ask for Project Name and Project ID. Enter your preferences.


Step 3: Enable the Calendar API ↑ Back to top

Once the project has been created, select your project from the top left dropdown. Choose the Google Calendar API.

Then click on Enable.

Step 4: Create Credentials ↑ Back to top

This will prompt you to first create credentials. Select Go to Credentials.

Alternate Method: Go directly to the API Manager > Project > Credentials page. There, select Create credentials and click on OAuth Client ID.

googlecalbookings-credentialcreation

Step 5: Set Up New Credentials ↑ Back to top

  • Under “Which API are you using?” select “Google Calendar API”.
  • Under “What data will you be accessing?” select “User data”
  • Then click on the button that says “NEXT”

Step 6: Set up your OAuth 2.0 Consent screen ↑ Back to top

This will take you to the next step with the oAuth Consent screen set up.


Now you can enter the details for the consent screen.  (Note: The consent screen will be displayed when you click on Connect from your site on WP-Admin > Bookings > Settings > Calendar Integration )

  • Your email address is already selected
  • Enter the Application Name
  • Please note that adding an Application Logo at this step requires verification from Google and can take up to 4-6 weeks (during which you will not be able to use it). Since this app is only used internally for connecting the site to the calendar, it’s recommended that you do not add a Logo here.
  • Click “SAVE AND CONTINUE”
  • Skip the ‘Scopes’ step as this is optional.

Step 7: Finish Setting up the Credentials ↑ Back to top

Now you will be taken to the OAuth Client ID screen set up.
Alternatively, go directly to the API Manager > Project > Credentials page. There, select Create credentials and click on OAuth Client ID and redo step 5.

  • Select Web application as the Application type.
  • Under “Authorized JavaScript Origins” leave that blank.
  • Enter https://example.com/wc-api/wc_bookings_google_calendar/ as the Authorized Redirect URI with example.com being the URL of your web store
  • Finally, click on the “Create” button and then the “Done” button.

Step 8: Add Credentials to your website ↑ Back to top

You access these by going to the API > Credentials page after having created them.

  1. Click on the name of the credentials to open them.
  2. Copy the Client ID and Client Secret.

Alternate Method: Download the credentials and open the .json file to access them. In the file, you’ll find several things, but these two are needed for the Bookings integration:

  • client_id
  • client_secret

On your store go to Bookings > Settings > Calendar Connection. 

  • Enter the Secret Id and Client Id under the section ‘Connect with your own Google App’
  • Save the settings.
    Calendar Credentials

Step 9: Authorize with Google ↑ Back to top

Once you’ve entered your credentials and saved your settings, click the “Connect with Google” button to authorize your account and calendar with Google.
Connect Custom Google App

This takes you to a different screen to choose a Google account.

Choose an account

There will be a warning about the app not being verified, you can read more about it here. Click on ‘Advanced’.
Warning Message

Click on the link that will appear after clicking on Advanced.
You will see a popup to grant access to your calendar. Click on Allow.

Allow Access to Calendar

On the following screen, confirm Access by clicking on Allow.

Confirm Access

You will then be redirected back to your site and a “Successfully authenticated” message should be visible if connected.

Successfully Authenticated

Step 10: Select the calendar and Sync Preference. ↑ Back to top

You can follow the steps here to finish the set up and learn more about the integration with your Google Calendar.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top