What is the best way to display customer-entered information such as billing, shipping, and payment info into the checkout process?

The following is an example to demonstrate what I mean.

The first step is the customer has to enter their billing information:

Checkout - Billing

The customer proceeds with shipping information, shipping method, and payment information before reviewing the order:

Checkout - Payment
I would like to display previously entered information under each section where the "Edit" links are, once the customer is past each step. Is there a way to do this?

Some additional information:

The progress sidebar is hidden via /theme/skin/frontend/[package]/default/css/styles.css:

#checkout-progress-wrapper {display:none;}

Here is my /app/design/frontend/[package]/default/template/checkout/onepage.phtml:

 * Magento
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2006-2014 X.commerce, Inc. (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
<script type="text/javascript" src="<?php echo $this->getJsUrl('varien/accordion.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/opcheckout.js') ?>"></script>
<ol class="opc" id="checkoutSteps">
<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
    <li id="opc-<?php echo $_stepId ?>" class="section<?php echo !empty($_stepInfo['allow'])?' allow':'' ?><?php echo !empty($_stepInfo['complete'])?' saved':'' ?>">
        <div class="step-title">
            <span class="number"><?php echo $i ?></span>
            <h2><?php echo $_stepInfo['label'] ?></h2>
            <a href="#"><?php echo $this->__('Edit') ?></a>
        <div id="checkout-step-<?php echo $_stepId ?>" class="step a-item" style="display:none;">
            <?php echo $this->getChildHtml($_stepId) ?>
<?php endforeach ?>

<input type="hidden" name="checkout_method" id="login:guest" checked="checked" value="guest"/>

<script type="text/javascript">
    var accordion = new Accordion('checkoutSteps', '.head', true);
    <?php if($this->getActiveStep()): ?>
    <?php endif ?>

    var checkout = new Checkout(accordion,{
        progress: '<?php echo $this->getUrl('checkout/onepage/progress') ?>',
        review: '<?php echo $this->getUrl('checkout/onepage/review') ?>',
        saveMethod: '<?php echo $this->getUrl('checkout/onepage/saveMethod') ?>',
        failure: '<?php echo $this->getUrl('checkout/cart') ?>'}

    //IE fix
    var cb = $("login:guest");
    cb.checked = true;


Thanks for any help or suggestions!

1 Answer 1


I'm not an expert of Prototype.js, but it seems like the progress sidebar is modified by the reloadStep function of the skin/frontend/base/default/js/opcheckout.js script.

reloadStep: function(prevStep) {
    var updater = new Ajax.Updater(prevStep + '-progress-opcheckout', this.progressUrl, {
        onComplete: function(){
        parameters:prevStep ? { prevStep:prevStep } : null

Where prevStep + '-progress-opcheckout' (prevStep could be billing, payment etc.) determines which block has to be edited.

One solution, but clearly not the best way, would be to add the code below just after the step-title div.

<div id="<?php echo $_stepId ?>-progress-opcheckout"></div>

As an id has to be unique, you would have to disable completely the progress sidebar, so not only hiding it.

  • Thanks! That appears like it would work with some additional styling changes. In case anyone is having a similar problem, they can remove the progress block (instead of hiding it via CSS) by using the following code in the local.xml file: <remove name="checkout.progress.wrapper" /> May 13, 2015 at 7:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.