Customizing the Magento checkout success-page

When optimizing your Magento shop for conversion, it is always good to pay attention to the Magento checkout success-page (URL checkout/success). You can thank the customer for purchasing, redirect the customer to a specific procedure. However, this page is only shown when you finish a Magento order. And after a refresh, this session is cleared - so a refresh of the success-page redirects you to an empty cart. This tutorial shows you how to improve this situation.

Modifying the success-page

Modifying the success-page boils down to copying the PHTML-template template/checkout/success.phtml from the Magento core theme folder app/design/frontend/base/default to your own theming folder app/design/frontend/default/YOURTHEME. You can use this to add more text and HTML, but also to add tweet-buttons to the page. Adding information dependant on the purchased products is a bit more complex. You can use the following to load the order object:

$orderId = Mage::getSingleton('checkout/session')->getLastRealOrderId();
$order = Mage::getModel('sales/order')->loadByIncrementId($orderId);

After this you can access the purchased items like this:

$orderItems = $order->getAllItems();
$purchasedSkus = array();
foreach($orderItems as $orderItem) {
    $purchasedSkus[] = $orderItem->getSku();
}

It requires knowledge of PHP programming to work with this, but you'll get the picture.

Previewing the success-page

The problem is that when you modify any information on this page (HTML, CSS, JavaScript, PHP), you will want to preview what the results look like. But once you place an order, and get to the success-page, a refresh of that page will clean the session and redirect you back to an empty shopping cart page. In other words, every time you make a change to the success-template, you would need to create a new order to preview the result. Sounds kind of stupid.

To allow you to preview the success-page, you either need to make core hack in the Magento source code, or you can use our free Yireo CheckoutTester extension. Both methods are explained below.

Core hack method

This method is a core hack - a direct modification of the original Magento files. A direct modification of the Magento core-files is never recommended, except for development purposes. Do not use this hack on production environments. Do not forget to uncomment the line $session->clear() (explained below) once you're finished.

The success-page is created through the module Mage_Checkout. The problem discussed here is that the controller of this module cleans the session. A refresh of the page causes the entire module to load with a fresh new session - and in a new session, access to the success-page makes no sense. Instead the visitor is redirected to the cart-page (which is empty at that time).

To change this behaviour, we need to locate that part of the module Mage_Checkout which is responsible for this cleaning action: This can be found in the file OnepageController.php:

app/code/core/Mage/Checkout/controllers/OnepageController.php

Preferably, the file is not edited directly. There are ways to override the controller with your own controller. One such method can be found in the Magento wikiWithin the file OnepageController.php locae the function successAction(). This function is responsible for generating the success-page, but it is also responsible for resetting the session:

$session->clear();

By commenting this line, we can maintain the same session and refresh the success-page numerous times without loosing our data.

//$session->clear();

Clean method using the Yireo CheckoutTester extension

Instead of using a core hack, you can also simply install our Yireo CheckoutTester extension. This does not change the behaviour of the actual checkout, like the method above, but it rather creates a new URL that allows you to preview the success-page for any order previously created:

http://MAGENTO/checkouttester/index/success

By default, the CheckoutTester lets you preview an order, of which the ID is configured in the System Configuration section belonging to CheckoutTester. A numerical ID has to be entered. To find this ID, go to the order overview in the Magento backend and open up the order. The URL changes into something like /view/order_id/X/ where X is the order ID. Do not use the ID that is prefixed with a hash (#) - that's the increment ID and not the actual ID.

You can also set a specific ID in the URL itself. This way you can quickly switch the success-page to see how it behaves for different orders.

http://MAGENTO/checkouttester/index/success/order_id/24

To prevent everybody from seeing these preview pages, you can use the Development IP setting in the System Configuration to specify from which IP-addresses the preview pages can be accessed.

Checkout Tester

Checkout Tester

Preview checkout success page

-- FREE --