Adding address autocomplete to the fast checkout
When you're using WooCommerce Fast Cart, you can speed up the customer journey even further by enabling address autocomplete. This is powered by Google Maps and is an excellent way to save your customers time by tapping into their huge address database. The customer starts typing their address and can then select the remaining details from a list of matching addresses.
Enabling address auto-complete
Enable address autocomplete on the plugin settings page at WooCommerce → Settings → Fast Cart. Once enabled, a 'Google API key' field appears underneath.
Follow the instructions below to get an API key - this is essential for the autocomplete to work. If you do not enter an API key then autofill will not be enabled, and customers will have to enter their full address manually.
How to get a Google API key
Since the address autocomplete is powered by Google, you must enter an API key in order to use it. While the process can seem daunting, it is easy if you follow these instructions exactly:
- Log into your Google account.
- Go to the Google Cloud Platform page, and fill out the Welcome information if you haven't already setup Google APIs in the past.
- Create a new project by clicking the 'Create Project' button on the far right of your dashboard.If you have already created an API in the past, you will need to click the 'API Project' dropdown located in the header, and then click the 'New Project' button in upper-right corner of the dialog that appears.
- The next step will ask you to enter a project name and possibly some additional details if your Google account is part of a Workspace (formerly G Suite) organization. In the project name, you can enter whatever you would like, just make sure it is something you will remember. When you are done, click the big 'Create' button.
- After the project is created, it may take a few moments for your dashboard to refresh and show the project, but if it was successful, you should see the name of your project in the page header.
- Now click the button directly underneath the page header which says 'Enable APIs and Services'.
- Now in the left side bar of the Dashboard, click the 'Credentials' link. When on that screen, click 'Create Credentials' at the top of the page.
A dropdown menu will appear with the option "API Key" - click on this selection.
- Now a popup dialog will appear giving you an API Key, copy this, and paste it into Fast Cart.Within the Fast Cart settings -
Once you paste in your API key, Fast Cart likely will give you a warning that the key is invalid. This is because your Google account does not yet have billing set up, or we have not yet restricted the access key. Save your settings, and follow the next steps. But if you get a green checkbox next to your key, you may be ready to go! Save your settings, test to make sure your new feature is working during checkout, and if so, go have a coffee. If not, proceed with the next steps. (You may still want to get a coffee.)
- Back on the Google API window, if the popup window is still there with your key, click the button in bottom-right corner which says 'Restrict Key'. If the popup has closed, at the top of the Credentials → API keys list, you will see "API key 1" (or something similar) with a yellow warning next to it. Click the key or the pencil icon to edit it.
- From the 'Restrict and rename API key' screen, you will want to limit your API key so that it can only be used on your website (and no one can make charges on your account). Underneath 'Application Restrictions', choose "HTTP Referrers (websites)"After selecting "HTTP referrers", a new settings panel will open named 'Website restrictions'. Inside it, click 'Add an Item'.
- A form will open requesting the address of your website. If you use subdomains or your site address start with 'www', make sure to include a wildcard character to allow all of you entire domain to work with the Google API. Click 'Done' when you're ready.
Now at the bottom of the page, you can click the blue 'Save' button.
- If your Google Developer Account already has billing enabled, you may be all done. Go back to your Fast Cart settings, refresh the page, and see if your API key is valid. If so, you're all done(*)! Go find yourself some tea. If Fast Cart still shows an error, go back to the Google Cloud Platform to enable billing.
(*) If you get successful validation, it's possible this is a false positive. Go try the new feature in your store to see if it gives you an error like this:
If this happens, proceed with the next steps.
- The billing screen is found inside the hamburger menu in the upper-left corner of any Google Cloud Platform page. Open it to add your payment method.
- The message you receive at this point may vary, but if this is a new account, it will have a link which says 'Link a Billing Account'. If not, billing is probably already set up, and there may be another issue with your API Key.
- It will now ask you to create a billing account. Proceed with this process and after payment details are processed, the new account should automatically be linked. NOW you're all done. Have an ice cream, that was a lot of work.