The usability of your checkout page is one of if not the most important element of your site to pay attention to in order to keep conversion rates up. A lousy checkout experience for your customers is a conversion killer. One of the major items that play a role in the user experience is the layout of elements on page that the user will have to navigate through on their journey to purchase. With this in mind, the checkout layout is something that you want to pay attention to during implementation and testing.
Remember though, one layout may work for one store and not the next, so A/B testing is important! Here at Demac we have tested a specific type of checkout layout that seems to work well for target audiences across a wide variety of industries but focused on a more mature demographic. Feel free to check out some of our work to see a sampling of some of our sites and see it in action.
The Magento Checkout
The default Magento checkout comes with steps in the content section that collapse and expand as you go through them until you reach the last step which contains what is similar to a mini cart. This is called the review step as the user can review all of the items one last time before they commit to purchase by selecting the “Place Order” button. It should be mentioned that the items in this review step will by default appear with no images, only the product title and product options like color and size. This unfortunately does not make it very visually appealing and neither does it provide the user with visual confirmation of the products in their order. In the sidebar, you can find the order progress block which will fill up as the user completes the information and proceeds through each step. It will show you what they have entered for Billing and Shipping Addresses, Shipping Method and Payment Method – this is very important to have visible as whenever the user is done entering their info, the step will collapse and they can no longer see what was submitted.
Layouts to Help Conversion
We discovered that a layout that will help increase conversion is one where the order progress block is replaced by an order summary block. The order summary block contains all of the items that are in the cart and it also contains either all the current order totals or a subtotal along with the product images. It will remain in the sidebar from beginning to end so the user will never forget what they have in their cart.
Even with the above being said, the order progress block is still important! You will want your users to be able to make sure that all of their information was entered correctly and not have their products say… shipped to the wrong address after the order is placed. To combat this, we have placed this block in that last checkout step, the one called the review step – we have removed the mini-cart table and placed the order progress in there instead. We also left the totals there (since, in this case, they’re not in the summary block) with the “Place Order” button. We could have taken this button and inserted it in the sidebar, however this would be an unexpected behaviour as the user would have been clicking the continue button in the first column through many steps to then be expected to move their click to the second column to complete the order. Not the greatest user experience. Finally, as the button was staying in the review step then it would make sense to see the totals right on top of it, so that’s why we left the totals there.
Here is an image of Terra20‘s checkout layout with the changes explained above.
How do you actually make these layout changes?
Go into your local.xml and make sure you have something like this in there.
<checkout_onepage_index> <reference name="checkout.onepage"> <!-- Adding Order Summary Block on the checkout sidebar --> <block type="checkout/cart_sidebar" name="cart_sidebar" as="sidebarCart" template="checkout/cart/sidebar.phtml" before="-"> <action method="addItemRender"> <type>simple</type> <block>checkout/cart_item_renderer</block> <template>checkout/cart/sidebar/default.phtml</template> </action> <action method="addItemRender"> <type>grouped</type> <block>checkout/cart_item_renderer_grouped</block> <template>checkout/cart/sidebar/default.phtml</template> </action> <action method="addItemRender"> <type>configurable</type> <block>checkout/cart_item_renderer_configurable</block> <template>checkout/cart/sidebar/default.phtml</template> </action> <block type="core/text_list" name="topCart.extra_actions" as="extra_actions"/> </block> </reference> <reference name="right"> <!-- Removing Order Progess Block from the checkout sidebar --> <action method="unsetChild"><name>checkout.progress.wrapper</name></action> </reference> <reference name="checkout.onepage.review"> <!-- Adding Order Progess Block on the checkout review step --> <block type="page/html_wrapper" name="checkout.progress.wrapper" translate="label"> <label>Checkout Progress Wrapper</label> <action method="setElementId"><value>checkout-progress-wrapper</value></action> <block type="checkout/onepage_progress" name="checkout.progress" before="-" template="checkout/onepage/progress.phtml"> <block type="checkout/onepage_progress" name="billing.progress" template="checkout/onepage/progress/billing.phtml"/> <block type="checkout/onepage_progress" name="shipping.progress" template="checkout/onepage/progress/shipping.phtml"/> <block type="checkout/onepage_progress" name="shippingmethod.progress" template="checkout/onepage/progress/shipping_method.phtml"/> <block type="checkout/onepage_progress" name="payment.progress" template="checkout/onepage/progress/payment.phtml"/> </block> </block> </reference> </checkout_onepage_index>
Line 1: This is the page handle where the onepage checkout lives.
Line 2: This is the name of the block that renders the onepage checkout.
Line 4 – 21: As explained on line 3, this is the order summary block with all its children, we need to create all of them instead of just inserting the block because this summary block has never been defined before inside of the onepage checkout handles. You can copy and paste this code snippet from checkout.xml.
Line 26: As the comment on line 25 explains, here we are unsetting (removing safely) the order progress block.
Line 29: This is the name of the block that controls the review checkout step (the last step).
Line 31 – 40: And here, as explained on line 30, we have all the blocks that render the order progress block, where you have your shipping and billing address, payment method and such.
After that, all you need to do is add the calls to those blocks in the proper templates.
Place this somewhere inside of
<div id="col-right-opcheckout"> <div class="opc-sidebar-block opc-summary-container"> <?php echo $this->getChildHtml('sidebarCart') ?> </div> </div>
And then place this somewhere in
<div id="progressReview"> <div class="opc-sidebar-block opc-progress-container"> <?php echo $this->getChildHtml('checkout.progress.wrapper') ?> </div> </div>
See What Works for You
If this checkout layout does not work for your site, you may want to try a one step checkout style. This is where the steps would not be collapsed but instead they would all be visible all the time – this may work if you plan on not asking for too much info during checkout or else it can begin looking quite cluttered. In either case, it is very important to A/B test your theories as it applies to the checkout layout and revisit semi-annually to make sure it is still relevant!
Related: The Magento Upgrade Guide