Your store’s checkout page can seem like it’s only a single, simple element in the complex mechanism that is your website. While you may think a single page can’t cost your site that much money, you’d be surprised by how much a poorly-done checkout page could harm your conversions.

There are a couple effective ways to improve your checkout conversions: address reasons for cart abandonment (shoppers who leave your site with items in the cart) and optimize checkout flows. We’ll cover some of the most popular and effective optimization techniques for your checkout in this post.

Learn common reasons for cart abandonment

Customers abandon carts fairly often. However, in order to improve your checkout page, you first have to know what some of the main issues users face are. (Here’s the definitive guide to understanding cart abandonment.)

Reasons for cart abandonment

Source: Invesp

The most common reason for abandonment is that users face high and unexpected costs and charges (shipping is the most common culprit). This can cause them to abandon the cart and leave to search for better offers. This is easy enough to fix — just be transparent about all of the possible costs a user might have to pay.

For instance, you could have a price calculator for shipping, like RuneNYC:

WooCommerce Shipping Calculator

💡 WooCommerce stores: you can do this in your shipping settings!

Another reason for abandonment could be requiring registration to check out. Some customers will be reluctant to create an account with your store — registration forms can be time-consuming to fill out, and they create mental tension by requiring another “decision” during checkout. You can make this easier for your customers by introducing a guest checkout or including social login to make signup easy.

WooCommerce Social Login

There are other hurdles that could bother your customers: your forms may be too long, their preferred payment option may be missing, they could be concerned about the security of their data, or they may be shopping from their phones and your site is not mobile-friendly. Any of these reasons may cause the customer to leave the cart behind. However, there are always ways to improve and eliminate potential threats to your conversions.

Be ready to recover abandoned carts

While we’ll discuss some ways you can avoid abandonment and optimize your checkout, before we get too far, note that you’ll always have abandoned carts in your store. While you can reduce that number, you should also approach this problem from multiple angles: be ready to recover lost carts as well, as this can drive additional revenue and sales.

You can get email addresses as early as possible in the checkout process to help you recover as many carts as possible. For example, Bonobos asked for an email as the first field in their checkout process to identify customers early.

Bonobos checkout

You could also look to get email addresses as items are added to the cart — check out Jilt to let you use early email capture with WooCommerce or Easy Digital Downloads.

Improve your checkout by targeting reasons for abandonment

Make sure your design is mobile-friendly

Believing that people interact with eCommerce sites on their mobile devices the same way they interact with them on their desktop devices is wrong. Even though a lot of websites have eliminated pinch and zoom, most of them rely solely on their websites being responsive to mobile devices. However, this is still a problem because a page being simply responsive is not enough to convert. Your pages have to do more than that. Data suggests that 64% of people are using mobile devices for shopping.

You have to build different user journeys for different types of devices.

For instance, filling out the forms on mobile devices is much more difficult than on desktop devices but there are ways to fix that. People also have much less tolerance for waiting for a page to load on mobile devices than they have for desktop ones.

Optimize your forms

Ensure you’re using mobile input types. This will ensure that, when users have to enter their email address, their phone pulls up a keyboard with automatic  @ and .com buttons; when they have to type numbers, it pull up a numeric keyboard. Using optimized inputs will make the process infinitely better for your users.

WooCommerce Mobile inputs

Also, try to keep your forms as short as possible. Don’t make your users work too hard — long, one-page forms work better on desktop, but a preferable type of form on mobile would be the one that spans across a few pages and has a progress indicator. Also, allow your customers to move on without signing up for your website.

Improve site loading times

Make sure that you test your page under all conditions since it can be frustrating to wait for the checkout page to load. 59% of people will abandon a webpage if it doesn’t load within 3 seconds. There are plenty of things that you can do in this case. You can get some tips on potential optimizations from Google’s PageSpeed Insights.

First, you could eliminate any graphic heavy objects like carousels, videos, etc. You can also remove any social media or third-party scripts if they are not necessary on that page. Your logo or any other compulsory graphics should be delivered via CDN (Content Delivery Network Hosted).

Stress test important pages on your site as much as possible to know how they work under extreme conditions, and investigate Google PageSpeed Modules or other tools to speed up load times.

Ensure labels and error messages are obvious

Filling in checkout forms is frustrating enough, even more so if the customer makes a mistake and doesn’t know what went wrong. For instance, let’s say a customer enters their email address wrong but there is no clear indication of what mistake was made — alerts on your page were either hard to find or not labelled properly.

One way to fix this is to simply show the mistake next to the section in the form that’s incorrect, or to scroll the customer back to the error message.

Checkout form submissions errors

You should also check the spelling and tone of those alerts to make sure they’re friendly and easy to understand.

Design for touch

The biggest difference between mobile and desktop devices is that the screens are of different size and they work differently. On desktop, you have a big screen and a mouse pointer which can reach any corner of the page easily. You can see most of a page, and buttons can be clicked, no matter their size.

On the other hand, screens on mobile devices are small and buttons are not as easy to click, depending on their size and placement.

To improve your mobile buttons, choose a single color for those buttons, so it’s clear what can be clicked and what can’t. For example, Bonobos uses blue for all call-to-action buttons.

Bonobos mobile checkout

You should also think about positioning of buttons and other elements — make sure that buttons are easy to reach with your thumb. Take a look at the chart below for context on how users typically use their thumbs with their phone.

Thumb position on mobile

Source: Scott Hurff

Keeping your buttons in the “natural” area for a mobile screen will result in more conversions. Less important things can be placed in the “stretch” area while you should put the most irrelevant things that don’t need to be touched in “OW” area. This way, you are optimizing your button positions to fit in with what’s comfortable for your users.

Pay attention to how you display your cart contents

How you display your cart contents is important. For example, there should be an option where users could buy the product immediately, without adding it to cart. If an item is added to the cart, you could upsell by displaying related items or secure a sale by offering discounts. If you don’t use “buy now” buttons, be sure to inform your customers that they have added a product to the cart.

Remove all distractions from your page and add only the most important things to it. Display your cart contents in a way that subtly focuses more on the image and use of the product than the price of it.

Include multiple payment options

Getting customers to be comfortable giving you money is the hardest part of converting a sale. Offering multiple payment methods makes this easier for the customer, as they can choose the payment method they’re most comfortable with to overcome purchasing objections.

WooCommerce multiple payment methods

Offering as many payment methods as you’re comfortable can drive additional conversions by ensuring your customers pay with the method of their choice. The preferred payment options are by credit card (42%) followed by PayPal (39%).

Include trust symbols

To dovetail with offering multiple payment methods, also ensure that these methods are trusted on your site. Customers want to know that personal data like addresses, credit card details, and email addresses are protected. Reassure them that data is safe with trust indicators, and include trust badges throughout your site and checkout.

Be transparent about your privacy policy as well — make sure it’s accurate (even though only 3-9% of people actually read it).

Live chat helps customers get timely help

Every customer has concerns or questions during checkout, and may want help with form elements they don’t know how to handle, answers to questions about shipping, or clarification on delivery estimates. Having a live chat or “click to call” option is an amazing thing to help with these questions, letting customers reach you easily and ask you all of their questions.

This way, you give your customers necessary reassurance. 44% of people claim that having a live person to contact whilst in the middle of a shopping experience was of tremendous help and it supported their decision to move on with the purchase.

We have studied how shoppers behave and concluded that one main element of brick and mortar stores is missing in eCommerce stores — help. While you shop in regular stores, there is always someone there to help you out and reassure you be it with their extensive knowledge and understanding of the product or with their knowledge of the process and payments. This is what is often needed in online stores and live chat gives it to the users. We have noticed a rise in conversions in the past few months since we added a live chat option.
Ellen Gustin from Elite Assignment Help

Eliminate the distractions

Online shoppers get distracted easily. This is why you should reduce the number of banners, videos, images, and advertisements to a minimum. All additional information relevant to the sale and the shopping experience like shipping details, frequently asked questions, etc. should open in a new window. Keep in mind that there isn’t enough space for content, so keep it to a minimum by using tools like Academadvisor to keep them brief.

Point customers’ focus directly to the product that they want to buy and let them buy it.

Removing distractions from your checkout page is a good idea. Not only does it help your users shop seamlessly but it also eliminates everything that could make your loading time slower. This has a great effect on your SEO.
Grant Thompson, an SEO Expert from Australian Help

Wrapping up

Optimizing your checkout page is not an easy process that can happen overnight but with these tips, you’ll be able to increase your conversions. Keep the device you are optimizing for in mind and what your troubles as a user would be.


Your eCommerce stores loses almost 70% of carts due to abandonment. Did you know that you can typically recover 10-15% of these sales? Try Jilt for free to save these carts – most stores see 10-15% more revenue with their first recovery campaign.
Articles you may also like:

Posted by Brenda Berg

Brenda Berg is a professional with over 15 years of experience in business management, marketing, and entrepreneurship. Consultant and tutor for college students and entrepreneurs at Ox essays. She believes that constant learning is the only way to success. You can visit her personal blog at Letsgoandlearn.com.

Leave a reply

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