Qala Modern Checkout

A better checkout experience for your customers.

Transcript

Welcome to this tutorial. We are taking a look at the modern checkout layout available in Qala. Qala uses WooCommerce to leverage e-commerce capabilities in your site. This is a hugely popular plugin for anyone looking to run a shop and one of the open-source solutions that Qala is built on.

The Qala modern layout offers you an alternative checkout more suited to today’s customers. It is optimized for mobile visitors, guiding the customer through each step of the checkout in a less distracting UI. In short, it is what we envision the WooCommerce checkout should be to maximize conversion, and we will continue to improve it as Qala and the needs of our clients evolve.

This is an opt-in feature baked into the Qala theme, so let’s look at how to enable it and what it does. We’ll access the settings by navigating to the Qala menu. This will bring up all the theme settings of the current version of Qala. For the checkout settings, we need to select the checkout tab. Here we toggle on the modern checkout option. This presents us with additional settings for translating the new text strings present in the modern checkout layout. These are already prefilled with English wording, and you can optionally change them to whatever text suits your site or language.

Once we are done, we publish the changes.

Now let’s look at our checkout. This is what the classic checkout looks like by default in Qala. It is a two-column grid with the entire header and footer above and below the page content. It is not bad, but it is also not very modern. There are some misplaced elements such as the coupon code feature at the top and selecting the shipping method to the right instead of the left. Now let’s update the page and see what the modern layout looks like.

Immediately we can see that the header has been slimmed down to the bare minimum in order to limit distractions and keep the user engaged with the checkout. The checkout itself is a single-column page that guides the customer through the ticket flow by first reviewing their cart, then proceeding with their address, shipping, and finally payment. We have carefully considered many details in this user experience, such as the coupon field, visual cues, and instant validation.

Through the valuable feedback from our clients, we have observed that the modern layout boosts conversion rates. However, we understand that the checkout process is a crucial component of your Qala shop. Therefore, we believe it should be your choice whether to implement this feature. That is why we have made it an opt-in setting for all Qala clients ready to be used.