There are three common checkout types in eCommerce, these are Multi-Step, Accordion, and One-Step Checkout. WooCommerce belongs to a One-Step check out where everything is shown to users. Users are therefore given a clear promise of “you are done once you complete what you see here“. This is the main benefit of One-Step checkout but could also be the source of checkout issues. Since everything is shown on one single page, this page will contain a lot of form fields and can often be perceived as very intimidating. The goal of this post is to help you simplify and make the WooCommerce checkout fields less intimidating and that should help you increase your conversion.
Use a Single ‘Full Name’ Field
Users think of their name as a single entity, and therefore often write their full name in the ‘First Name’ field. Only as they progressed through the form did they notice the “Last” name fields and go back to correct the error.
Fiddling with the name fields isn’t the most severe of issues. No user abandons the purchase due to two name fields and only a few actual form field errors were observed during testing. Users notice their mistake and correct it before proceeding, hence the issue won’t show up in most web statistics either. What this issue doesn’t have in severity, it does however have in frequency. While only a few of these subjects got validation errors, all the subjects were interrupted and had their typing flow broken. Given the simplicity of the task “type your name” the needless friction is quite significant.
The solution is however relatively straightforward. Acknowledge users’ tendency to think of their name as a single entity by implementing a single “Full Name” field. When testing sites with a single “Full Name” field, comparably only 4% of subjects briefly hesitated before typing in their full name, and no one had the kind of typing or interaction issues observed in the multi-name-fields approach.
Besides supporting users’ tendency to think of their name as a single entity, a single name field also solves some of the issues regarding additional name fields. When using first and last name fields users can become in doubt as to whether middle names are needed, and where to put them. This issue is alleviated by a single full name form field, as users can write their name exactly as they please or how it’s printed, for example, on a credit card.
Using a single “Full Name” field will at a minimum cut the number of form fields by one. As the average checkout flow consists of 14.88 text form fields, this translates to a ~7% reduction of the form fields presented to users – an initial step in reducing how intimidating the checkout step will be perceived.
Hide Optional field behind a link
WooCommerce has three optional fields that users don’t need to fill up, these are company field, second address field, and order notes. Optional inputs presented as open text fields demand a disproportionate amount of attention, as users still have to notice that the field is optional and deduce whether or not the field is irrelevant for them. Simply hiding those fields behind a link is the obvious fix to the issue.
Hide ‘Company Name’ Behind a Link
While Company Name fields are mostly optional, optional inputs presented as open text fields demand a disproportionate amount of attention, as users still have to notice that the field is optional and deduce whether or not the field is irrelevant for them.
The solution is to simply hide the Company Name field behind a link. As importantly, on the sites that provided a link to reveal the Company Name field, the eye-tracking testing revealed that all subjects noted the links before moving on or engaging with them. This is a crucial detail, as the sub-set of users who do have a use for a Company Name needs to be able to spot the link.
Hide ‘Address Line 2’ Behind a Link
The presence of ‘Address Line 2’ breaks some users’ typing flow and makes them question if their initial ‘Address Line 1’ input is correct.
Writing an address is relatively straightforward for most users but seeing “Address Line 2” will stop users because they already filled their address and will question if the initial address(Address Line 1) was correct.
Hide ‘Order Notes’ Behind a Link
Similar to hiding the Company name field and the second Address field, hiding the Order Notes field behind a link results in showing one less form field by default, making the step feel less intimidating.