Sorry! Internet Explorer is not supported on this site. Please view on Chrome, Firefox, or Edge.

Having fun at Zao is one of our values. We’ve put limited animated flourishes throughout our site to communicate our love of levity. We also recognize that onscreen movement is not fun or possible for everyone. We've turned off all our animations for you per your browser's request to limit motion. That said, we don't want you to miss out on the party.

Here's a funny joke to enjoy!

Where does the General keep his armies?

In his sleevies!

WP eCommerce: How to add a ZIP Code Lookup to your Checkout

We get loads of requests for customizations to different eCommerce platforms on WordPress.  One that we receive on a super regular basis is for the ability to auto-populate the city, state and country just by entering the ZIP Code.  This is a very US-centric feature, though it could be ported to any country.  The concept really favors those businesses that sell primarily within their own country.  That said, this segment comprises a very large portion of the eCommerce space.

So that said – how would you do this?  It’s actually pretty easy.  From a UX standpoint, you want to be sure that you’re showing the ZIP Code before you show the other fields – otherwise, it sort of defeats the purpose.  WP eCommerce makes this super easy, but every platform is different.
set-zip

Next, you’ll want to connect with a ZIP Code API of your choice.  There are myriad different APIs to choose from, pick your favorite or whatever fits best for your purposes.  For today, I’m going to use Zippopotamus. What I like about that service is that it actually works in over 60 different countries, not just the US, even though that’s our focus for today.

A user experience that I’ve come to really enjoy is the ability to fill in a ZIP Code, and then have it auto-fill and auto-show the city, state and country.  The constant refrain against trying to be smart about ZIP Codes is “What if you get it wrong? What about ZIP Codes that cover multiple cities?  What if the API fails?”

A simple UX is the key to all of these edge cases.  Regardless of success or failure, simply show the extra fields once a response is received – or if none can be received at all.  If it happens to return nothing, or the wrong thing, the user can simply fill in the right thing.  But it’s a great improvement for the vast majority of visitors to your site.  Now, for some code.

The code above is pretty well self-contained and self-explanatory. It’s not the prettiest thing ever, or the most complete, but it gets the job done. In essence, we’re simply adding three functions.  One to show the city/state/country, one to hide it, and one to ping the API.  We’re not doing any clever error handling.  We’re simply pinging the API, and showing all the fields, no matter what.  If we get a successful response, we’re filling in the fields with that information.

You’ll notice, if you’re familiar with WP eCommerce, that we’re not targeting any fields that exist in the stable version that exists in the wild today. We have a phenomenal new release coming out, version 4.0.  It includes what I believe is the most usable checkout experience in any eCommerce platform for WordPress.  We’re targeting elements within that new theme engine.  Be sure to check that out.

With those ~35 lines of code, we have the experience you witness below.  A totally usable

zip

 

Join the Conversation

7 Comments

  1. I used code snippet plugin and got this error and when i activated the snippet.

    Don’t Panic
    The code snippet you are trying to save produced a fatal error on line 1:

    syntax error, unexpected ‘$’, expecting variable (T_VARIABLE)
    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

    Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

Leave a comment

Your email address will not be published.