How to Add Location Picker at Checkout Page | WooCommerce Website

hi guys today we will see how you can add a location picker to your woocommerce website let's say a customer purchases a product from your site and goes to the checkout page now here they need to enter their complete address now what if they can do it in a single click like this and their address will be detected automatically amazing right that's why we need a location picker now if your customer want to set their exact location they can just drag the pointer and set it and the best part is by using this method you'll get the accurate location of your customer which will make it easy for you to deliver the product so if you want this feature on your Ecommerce website just watch this video till the end 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 and our super fast WordPress hosting at webspace kit you can learn more about these by clicking the link in the description including a 10 of coupon okay I am harshit from website Learners and let's get started now before we begin we need to have an e-commerce website on WordPress so this is the e-commerce website which we have on WordPress now if you don't have any Commerce website just watch this video and create one okay now to add a location picker to our Ecommerce website we are going to do three steps the first step is to install the plugin called location picker so to install the plugin let's go to our eCommerce website then go here and click dashboard now go to plugins and click add new Now search for a plugin called location picker and we'll get this plugin this plugins helps you to add a location picker on the checkout page of your eCommerce website and customers can choose their exact location on Google Maps instead of typing out their full address so to install the plugin let's click install and then click activate 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's go to step 2 which is to get the Google Maps API key so to get that just open a new tab and search Google Cloud console now click on this link and it will take you to this site now click get started for free and it will ask you to sign into your Google account I am going to sign in to my account once you have signed in now here you need to choose the type of your business I am going to select small company now check this box and click continue now click here and select your account type I am going to choose individual now scroll down and it will ask for your card details now you can see here these details will be used only for verification and you won't be charged within the free trial lens so let's enter our car details once you are done click Start free trial and it will take you to this page okay so now we have activated the free trial on Google Cloud now here enter the name of your project I am going to enter location picker API once you are done click create okay now to get the Google Maps API key we need to enable a few apis to do that click here and select Library and then it will take you to this page now first let's enable the maps JavaScript API so let's click on it and click enable and then you will get this page next let's click on map static API and click enable now click on geocoding API and click enable once the apis are enabled now to get the API key click credentials then click create credentials and select API key so now we have got our Google Maps API key once you get the API key now to add the location picker on our checkout page we need to add this key to our website so let's copy the API key go back to your dashboard and paste it here okay so now we have successfully added the API key once you have added the API key let's go to step 3 which is to enable the map feature on our Ecommerce website now to display the Google Map on the customer's checkout page and Order Details page just enable this option now scroll down and if you want to receive a map link to the order emails just enable this option now let's click here and here you can choose how you want the Google Map link to appear on the email I am going to choose button now your Google Map link will appear on your email like this okay now here you need to choose in which email you want to display the Google Map link so let's click here and select the one you want I am going to choose New Order so that whenever we receive a new order we'll get the Google Map link of our customers address directly to our email 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 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 eCommerce website now let's see how the location pickup feature works on our eCommerce website so let's go to our site now just like a customer would do let's purchase a product from our site I am going to choose this product now click add to cart and view cart then click proceed to checkout 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 field gets filled automatically now if your location is not detected correctly click on the red pin and move it to your correct location you can see that the location has been changed successfully and the new address has been updated in the address field now let's enter our remaining details and click place order okay so now we have successfully placed the order now let's check the order on our mobile so let's go to our Gmail inbox you can see that we have received an email with the details about the order now if you open it you can see that the location is detected successfully and you can get the directions by clicking here okay so that's it guys this is how you can add a location picker to your eCommerce website now if you want to create a mobile app for your eCommerce website you can make one by watching this video 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 also make sure you click the Subscribe button to see more videos from us thanks for watching I'll see you in the next video till then take care bye bye

Channel: Website Learners

Views: 22,043

Keywords: google address autocomplete, insert a google map to your website, woocommerce google autofill plugin, woocommerce checkout location picker, how to add google map on my website, add google maps to woocommerce shipping, add google maps to woocommerce billing, how to get customer locations for order delivery, how to add google maps to your ecommerce website, how to location picker at checkout page of your website, how to add checkout address autofill in woocommerce

Id: l928FYEQgeA

Length: 8min 19sec (499 seconds)

Published: Wed Jan 25 2023