Magento is a great piece of software. It offers a huge amount of functionality out-the-box that saves our clients time and money.

Unfortunately not all parts are perfect and the default checkout process is one of those. If you’ve ever experienced the default one page checkout you’ll soon realise it is slow, bloated and in need of some attention.

There are lots of modules on the market to improve the checkout experience. While these improve usability they can come with their own complications. Adding a new layer of functionality on top of default Magento, especially at checkout stage, can cause issues. We recently wrote a post about the hidden costs of using modules which we recommend reading.

As part of a new project we decided to improve the one page checkout that comes with Magento. By modifying the default Magento checkout we’re able to keep all the features without adding extra modules.

Our goal was to make the default Magento checkout process simple and fast for customers to use.

The first thing we did was to remove all possible distractions. This allows the customer to focus on the task at hand – completing the checkout process. We removed the navigation, sidebars and search. We then replace the header and footer with simplified versions.

Once we had cleaned up the elements that are around the checkout, we focused on the steps. By default there are five steps to a Magento checkout process. This can be quite overwhelming for customers. Initially we hide all the steps apart from the first one. Customers can then choose from three options – login, register or checkout as guest.

step-1

Once customers have made a choice we reveal the rest of the process. We then combined the billing and shipping steps into one. Many people use the same for both so combining these steps makes sense. If customers wish to change their shipping address there is a checkbox to reveal the new form fields.

To reduce the number of fields we removed all the ones not required. We then added a postcode lookup. This allowed us to further decrease the number of visible fields while allowing customers to find their address easily.

From the second step onwards we introduced a sidebar. This contains a quick summary of what the customer is ordering and the payment methods the store accepts. This provides reassurance for the customer while completing the checkout process.

step-2

Once the address section is complete the customer is directed to the payment gateway. On their return to the main checkout process they are presented with an overview of their order. This includes the product they are ordering, their billing and delivery address, and the chosen payment method. If everything is correct they can place their order.

step-3

So to recap we have:

  • Cleaned up the interface, offering a slim version of the website.
  • Reduced the number of steps by combining the billing and shipping addresses.
  • Reduced the number of fields by removing ones not required and introducing a postcode look up.
  • Added confidence messages and an order summary down the right of the page.

If you’re interested in adding our checkout modifications to your Magento eCommerce store, get in touch.