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.

Published by Scott

3 Comments

  1. […] by removing the frustration of losing form values on the web browser refresh action. This small plugin by Scott Bolinger has a big use case for your Woo store visitors and may even bump up conversions. […]

    Reply
  2. I’m going to test your solution, I’m using a simple script

    https://github.com/simsalabim/sisyphus

    if you want to take a look, i just injected it into my checkout page and it is working well and works for any type of form.

    should be standard for woocommerce, it greatly increases the conversion.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Get 50% off the Holler Box Pro Bundle! Click here to redeem.

Holler Box

Content Upgrade Bonuses

Get 3 free bonuses to make it easier for you to create better content upgrades:
  • 21 extra content upgrade ideas and examples
  • Free canva.com ebook cover design
  • Free 3D ebook cover Photoshop action
Enter your name and email below.
Holler Box

WooCommerce Statistics Infographic

Enter your email below to get our analysis of 2017 WooCommerce statistics in a handy PDF infographic.
Holler Box