Magento One Step Checkout tutorial: Giving the Magento Checkout a Facelift

I recently started a task to give a Magento check out a little bit of a facelift. Specifically, one of our clients wanted the shipping address and shipping method to be in the first step of the checkout. Then have the billing address and payment method as second step and finally have the review & checkout. On top of that, they also wanted the multi-shipping to have same setup.
So far, I have completed the single address section. The shipping section was a bit of a challenge because the shipping preference comes after shipping address on the one page checkout.

The solution was using an ajax call to update the shipping preference as the user changes the shipping address. There were also some major changes on how the gift message works to fit the design. I ended up scraped the default gift handler in prototype js and redesigned it in jQuery.

The billing address and payment were easier to merge. I only had to combine the onepage checkout’s save billing and save payment function together.

The review did not have to change much. The progress blocks, which is usually updated as you complete the steps, is merged as part of the review.

Last but not least, many steps to code changes are also required in op_checkout.js, such as copying the shipping address to the billing address and the steps for rearrangement.

Here are some screenshots of the custom checkout steps:

You can see more about Magento One Step Checkout Extension at http://magentoonestepcheckout.net/