How To Save Checkout Form Values In WooCommerce

tl;dr – I made a plugin that saves checkout form values, you can get it here.

One of the most frustrating things I experience on the web is filling out a form, only to press Submit and it shows an error and clears the form. It makes me want to HULK SMASH!!

A simple way to avoid this would be to save the form in browser storage, so it will persist even after the page is refreshed. That means it will stay filled out if there is a submission error, like the example below.

Saving the form in this way means that if someone starts filling out the checkout page, and then leaves, the next time they come back it will still be filled out. I can see this saving some customers a lot of frustration, which would lead to higher checkout conversion rates.

How to Save WooCommerce Checkout Form Values

WooCommerce already saves the address fields, and if you are logged in it should pre-populate most of your information. However, there are other fields like name and company that are not pre-filled. Also, saving values to browser storage means that if you enter a different address than the one of your account, that value will be saved.

I made a script that saves the form values, and created simple plugin. You can get the plugin here.

It’s just a proof of concept, so I fully expect it to break something. I have tested it with a simple checkout form and it works great, but use with caution. Pull requests welcome.

Update: this plugin now also includes the abandoned checkout flow described in this post.

How it Works

The way it works is to save all form fields to a single localStorage item in the browser in an object any time the form is updated. When the form is loaded, we pre-fill it with the saved values. You can see the full script here.

Local storage is not very reliable because the user can clear it out, but that’s not a big deal since they will just start with a blank form like normal.

If you don’t like my plugin, Garlic.js is a library that saves form fields, although it has not been updated in over a year. The CheckoutWC plugin uses this library so it must still work.

Gotchas

Some potential problems I see with this approach:

• There may be some privacy concerns storing user data in the browser
• Expiring the storage item after a couple of weeks is probably a good idea
• I’m not sure how well this plays with non-standard checkout fields like bookings
• It’s a little bit creepy to see all of your data pre-filled when you visit a site while logged out

If you have thoughts or requests for features for this plugin, let me know in the comments.