0:00
Hi guys, today we will see how you can add a location picker to your WhoCommerce website
0:04
Let's say a customer purchases a product from your site and goes to the checkout page
0:10
Now here, they need to enter their complete address. Now what if they can do it in a single flake like this
0:17
And their address will be detected automatically. Amazing right? That's why we need a location picker
0:23
Now if your customer want to set their exact location, they can just drag the pointer and set it
0:29
And the best part is by using this method, you'll get the accurate location of your customer
0:33
which will make it easy for you to deliver the product. So if you want this feature on your e-commerce website, just watch this video till the end
0:40
Now before we get into the video, I have a message for you. This video is not sponsored, but it is supported by those of you who purchased our courses
0:47
and our super fast WordPress hosting at WebSpaceKit. You can learn more about these by clicking the link in the description, including a 10
0:54
off coupon. Okay, I'm Harses from website learners and let's get started
0:59
Now before we begin, we need to have an e-commerce website on WordPress
1:03
So this is the e-commerce website which we have on WordPress. Now if you don't have an e-commerce website, just watch this video and create one
1:11
Okay, now to add a location picker to our e-commerce website, we are going to do three steps
1:15
The first step is to install the plugin called location picker. So to install the plugin, let's go to our e-commerce website
1:21
Then go here and click Dashboard. Now go to plugins and click Add New
1:29
Now search for a plugin called location picker. And we'll get this plugin
1:40
This plugin helps you to add a location picker on the checkout page of your e-commerce website
1:44
And customers can choose their exact location on Google Maps instead of typing out their full address
1:49
So to install the plugin, let's click install. And then click activate
1:58
So now we have successfully installed the plugin Once you have installed the plugin now we need to get the Google Maps API key and paste it here So let go to step 2 which is to get the Google Maps API key
2:09
So to get that, just open a new tab and search Google Cloud Console
2:14
Now click on this link and it will take you to this site. Now click Get Started for free
2:22
And it will ask you to sign in to your Google account. I am going to sign in to my account
2:27
Once you have signed in, now here you need to choose the type of your business
2:35
I am going to select small company. Now check this box and click continue
2:46
Now click here and select your account type. I am going to choose individual
2:56
going to choose individual. Now scroll down and it will ask for your card details
3:05
Now you can see here these details will be used only for verification and you won't be
3:10
charged when the free trial ends. So let's enter our card details
3:18
Once you are done click start free trial and it will take you to this page
3:25
Okay, so now we have activated the free trial on Google Cloud
3:29
Now here, enter the name of your project. I'm going to enter Location Picker API
3:34
Once you are done, click Create. Okay, now to get the Google Maps API key, we need to enable a few APIs
3:42
To do that, click here and select library. And then it will take you to this page
3:51
Now first let's enable the Maps JavaScript API. So, let's click on it
3:59
And click enable. And then you will get this page Next let click on Map Static API and click enable
4:15
Now click on Geocoding API and click enable. Once the APIs are enabled, now to get the API key, click credentials
4:28
Then click Create credentials and select API key. So now we have got our Google Maps API key
4:36
Once you get the API key, now to add the location picker on our checkout page, we need
4:41
to add this key to our website. So let's copy the API key
4:47
Go back to your dashboard and paste it here. Okay, so now we have successfully added the API key
4:58
Once you have added the API key, let's go to step 3, which is to enable the map feature on our
5:03
e-commerce website. Now to display the Google Map on the customer's checkout page and order details page, just
5:11
enable this option. Now scroll down and if you want to receive a map link to the order emails, just enable this option
5:26
Now let's click here and here you can choose how you want the Google Map link to appear on
5:31
the email. I'm going to choose button. Now your Google Map link will appear on your email like this
5:38
Okay, now here you need to choose in which email you want to display the Google Map link
5:43
So let's click here and select the one you want. I am going to choose new order
5:49
So that whenever we receive a new order, we'll get the Google Map link of our customers' address directly to our email
5:56
Once you have done that, now scroll down. Now instead of letting your customers type their whole address, if you want the address field to get your email
6:02
want the address field to get filled automatically you can enable this option Once you are done click Save Changes Okay so now we have successfully enabled the map feature on our e website
6:19
Now let's see how the location pickup feature works on our e-commerce website
6:23
So, let's go to our site. Now just like a customer would do, let's purchase a product from our site
6:30
I'm going to choose this product. Now click Add to Cart and ViewCart
6:38
view cart then click Proceed to checkout
6:48
Now as you can see we have got a Google Map on our checkout page. Now when you click on this button you can see that your location gets detected and the address
6:56
field gets filled automatically. Now if your location is not detected correctly, click on the red pin and move it to your
7:03
correct location. You can see that the location has been changed successfully
7:08
and the new address has been updated in the address field. Now let's enter our remaining details
7:20
And click place order. Okay, so now we have successfully placed the order
7:27
Now let's check the order on our mobile. So let's go to our Gmail inbox
7:32
You can see that we have received an email with the details about the order. Now if you open it
7:38
You can see that the location is detected successfully and you can get the directions by clicking here
7:49
Okay, so that's it guys. This is how you can add a location picker to your e-commerce website
7:55
Now if you want to create a mobile app for your e-commerce website, you can make one by watching this video
8:00
If you want to learn more about e-commerce website, you can check out our complete e-commerce course which is available on this link
8:06
Also make sure you click this subscribe button to see what you will. subscribe button to see more videos from us. Thanks for watching
8:10
I'll see you in the next video. Till then, take care. Bye-bye
