5 ideas how to edit Magento checkout success page

5 ideas how to edit checkout success page

Your Order has been placed. Thank You! How many times customers read this online being about to close the order success page. After ordering users forget about your website, as usual. However, you can keep them on. You might engage your customers to other processes at your website in order to attract them back to your store.

Today we would like to share with you a simple tutorial that will help you to understand -  

How to customize Magento checkout success page.

We recommend you to use the checkout success page more efficiently for your customers. Why not keep customers on the page and get a chance to double sales. There are many suggestions you can motivate users with:

  • A discount coupon code
  • Attractive block with cross-sells and related products
  • Invitation to create an account
  • Newsletter subscription checkbox
  • Inspirational video
  • Different marketing messages and other deals from your store

By the way the Thank you page is a perfect opportunity to gain customer loyalty, receive extra points to your website reputation and convert more clients.

In order to make the order confirmation page functioning correctly for future user actions, you have to know how it actually works.  

We will provide you with codes and other details related to different Magento versions. You could follow easy steps listed separately for Magento and Magento 2.

Look what you have to do before customizing a success page...

Steps for Magento 1 

  1. The default Magento order success page is 2-column. You can change the layout in the checkout.xml. 
  2. The file templates you can find here: app/design/frontend/package/yourcustomtheme/template/checkout/success.phtml
  3. In case you don’t see files, you can copy it from base package.
  4. Before designing your success page you can stumble across a problem. We mean when you click "Refresh" button on a success page, you will be redirected to the empty cart. Thus we recommend you find the file app/code/core/Mage/Checkout/ controllers/OnepageController.php and comment this line in public function successAction. Line is //$session->clear();
  5. Right now it would be more easier to check for compatibility with different browsers.

Note: uncomment the code to prevent the wrong running of your website.

Steps for Magento 2

  1. The default Magento order success page is 2-column. You can change the layout in the checkout.xml. 
  2. The file templates you can find here: app/code/Magento/Checkout/view/frontend/templates/success.phtml In order to customize that you have to copy the file from app/design/frontend/Magento/luma/Magento_Checkout/templates/success.phtml
  3. Before designing your success page you can stumble across a problem. We mean when you click "Refresh" button on a success page, you will be redirected to the empty cart. Thus we recommend you find the file app/code/Magento/Checkout/Controller/Onepage/Success.php and comment this line in public function successAction. Line is $session->clearQuote();
  4. Right now it would be better to check for compatibility with different browsers.

Note: uncomment the code to prevent the wrong running of your website.

Now you can set about styling a success order page. We will help you to place the social-buttons block, show address information, add the static content block and custom CSS styles. You will also learn how to add Google Adwords conversion code in order to identify how effectively your ad campaign leads to purchases, calls, etc.

How to show address information on checkout success page

Steps for Magento 1

The default Magento success page looks too simple.

Let’s add the address block. Please add the following code to the success page template:


<p> 
 <?php 
         $order = Mage::getModel('sales/order')->loadByIncrementId($this->getOrderId()); 
         if ($order->getId()) { 
             $billingInfo = $order->getBillingAddress()->getFormated('html'); 
             $shippingInfo = $order->getShippingAddress()->getFormated('html'); 
             if ($billingInfo != $shippingInfo) { 
                 echo '<span>' . $this->__('Billing Information') . ':</span> '; 
                 echo $billingInfo; 
                 echo '</p><p>'; 
                 echo '<span>' . $this->__('Shipping Information') . ':</span> '; 
                 echo $shippingInfo; 
             } else { 
                 echo '<span>' . $this->__('Billing & Shipping Information') . ':</span> '; 
                 echo $billingInfo; 
             } 
         } 
 ?> 
</p> 

Now you can see improved Magento order confirmation page with added address block.

Steps for Magento 2

First your customers see the default Magento success page.

We suggest to improve the page with user address information. Please add the following code to the success page template:


<p> 
	<?php 
		 $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); 
		 $order = $objectManager->get('Magento\Sales\Model\Order') 
			 ->loadByIncrementId($block->getOrderId()); 
		 $renderer = $objectManager->get('Magento\Sales\Model\Order\Address\Renderer'); 
		 $billingInfo = $renderer->format($order->getBillingAddress(), 'html'); 
		 $shippingInfo = $renderer->format($order->getShippingAddress(), 'html'); 
		 if ($billingInfo != $shippingInfo) { 
			 echo '<span>' . __('Billing Information') . ':</span> '; 
			 echo $billingInfo; 
			 echo '</p><p>'; 
			 echo '<span>' . __('Shipping Information') . ':</span> '; 
			 echo $shippingInfo; 
		 } else { 
			 echo '<span>' . __('Billing & Shipping Information') . ':</span> '; 
			 echo $billingInfo; 
		 } 
	S?> 
</p> 

Afterwords customers will see the following content on the checkout success page.

How to place static content block

In order to clarify this issue, we suggest you to add a green tick to the checkout success page via CMS static block for example.

You can see already created “green-check” CMS block.

Following steps below you will see a result on frontend.

Steps for Magento 1

1. In order to add static block or any other widget to the one page checkout success page, please open the Magento CMS Widget interface.

2. You can see a button “Add New Widget Instance” at backend page “Manage Widget Instances”. Click on it.

3. Select “CMS Static Block” as a widget type in “New Widget Interface”. Set a design theme. Then press “Continue”.

4. Fill all required fields on the next page. Then press “Add Layout Update”.

5. In the opened interface please do as follows:

  • Set “Specified Page” in the “Display On” field.
  • Select “One Page Checkout Success” in the field “Page”
  • The “Block Reference” drop-down will help you to select a place where you want to see CMS Block.

6. Select what exactly CMS block should be shown by using the tab “Widget Options”.

Now you see a result.

Steps for Magento 2

Look at already created “green-check” CMS static block.

Now you have to do as follows:

1. Please open the Magento Widget interface.

2. Choose the required value. Press “Continue”.

3. In a Storefront Properties fieldset you’ ve already have “ CMS Static Block” set as a widget type. Please specify a widget title, assign to store view and set sort order. Then press “ Save and Continue Edit&rdquo.

4. Click on “Add Layout Update”.

5. In the opened interface please set “Specified Page” in the “Display On” field. Select “One Page Checkout Success” in the field “Page”.

6. The “Block Reference” drop-down will help you to select a place where you want to see your CMS Block.

7. “Widget Options” fieldset will help you to select CMS block you need to display.

Now you can see how “Green-check” looks on checkout success page.

How to set up the Google Adwords tracking

In order to check how well your ad works, you have to add Google Adwords conversion code to the Magento checkout success page.

Steps for Magento 1

1. Open the file app\design\frontend\XXXX\XXXX\template\checkout\success.phtml

2. Use following code to add google adwords conversion tracking:


<?php
$order = Mage::getModel('sales/order')->loadByIncrementId($this->getOrderId());
$amount = (float)number_format($order()->getSubtotal(),2);
?>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 'CONVERSION_ID';
var google_conversion_language = "LANG_CODE";
var google_conversion_format = "FORMAT";
var google_conversion_color = "COLOR";
var google_conversion_label = "LABEL";
if (<?php echo $amount?>) {
var google_conversion_value = <?php echo $amount?>;
}
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//www.googleadservices.com/pagead/conversion/CONVERSION_ID/?value=<?php echo $amount?>&amp;label=LABEL&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

Steps for Magento 2

1.Open the file app/design/frontend/Magento/luma/Magento_Checkout/templates/success.phtml

2. Use following code to add google adwords conversion tracking:


<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$order = $objectManager->get('Magento\Sales\Model\Order')
    ->loadByIncrementId($block->getOrderId());
$amount = (float)number_format($order()->getSubtotal(),2);
?>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 'CONVERSION_ID';
var google_conversion_language = "LANG_CODE";
var google_conversion_format = "FORMAT";
var google_conversion_color = "COLOR";
var google_conversion_label = "LABEL";
if (<?php echo $amount?>) {
var google_conversion_value = <?php echo $amount?>;
}
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//www.googleadservices.com/pagead/conversion/CONVERSION_ID/?value=<?php echo $amount?>&amp;label=LABEL&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

How to add custom CSS styles to Magento order success page

Steps for Magento 1

Follow the example in order to see the process of adding custom CSS styles in details. Let’s start from hiding page title for success page and making “Thank you” title bigger. We’ll also convert it to uppercase.

Page title has CSS class “page-title” and thank you title is in H2 tag with class “sub-title”. Have a look at screenshot below.

In order to implement those changes, please add a piece of code mentioned below to success page template. You can insert this code at the top or at the bottom of template.


<style>
.page-title {
        display: none;
}
h2.sub-title {
        font-size: 24px;
        text-transform: uppercase;
}
</style>

Here is the result:

PS: there is another way to add some custom styles for success page. Without inline styles. You can expand your theme CSS-file with new styles. Magento Checkout Success Page has unique class name “checkout-onepage-success”. So we can use this class name to make sure that our custom styles affect only a success page. Add code below to CSS-file of your Magento theme and you’ ll get exactly the same result as we achieved with inline styles.


.checkout-onepage-success .page-title {
        display: none;
}
.checkout-onepage-success h2.sub-title {
        font-size: 24px;
        text-transform: uppercase;
}

Steps for Magento 2

Follow the example where we’re going to change “Continue Shopping” button color and move it to the right. This button is a hyperlink with three CSS classes - ‘action’, ‘primary’ and ‘continue’. It is placed in DIV element with class “actions-toolbar”. Take a look at screenshot below.

In order to implement changes, please add a piece of code mentioned below to success page template. You can insert this code at the top or at the bottom of template.


<style>
.action.primary.continue {
    background-color: #83B33F;
    border-color: #83B33F;
}
.action.primary.continue:hover {
    background-color: #668E2D;
    border-color: #668E2D;
}
.actions-toolbar .primary {
    float: right;
}

Here is the result:

PS: there is another way to add some custom styles for success page. Without inline styles. You can expand your theme CSS-file with new styles. Magento Checkout Success Page has unique class name “checkout-onepage-success”. So we can use this class name to make sure that our custom styles affect only the success page. Add code below to CSS-file of your Magento theme and you’ ll get exactly the same result as we achieved with inline styles.


.checkout-onepage-success .action.primary.continue {
        background-color: #83B33F;
        border-color: #83B33F;
}
.checkout-onepage-success .action.primary.continue:hover {
        background-color: #668E2D;
        border-color: #668E2D;
}
.checkout-onepage-success .actions-toolbar .primary {
        float: right;
}

That’s it.

Want to know what’s the last important step to verify your Magento order success page looks awesome?

If you complete your Thank you page styling, you should test all done changes. When you refresh a success page, you are redirected to the shopping cart, as usual. Thus you have to create a new order each time you make customizations to the checkout success page.

In order to simplify and speed up the testing process, you can follow our recommendation:

Please comment out the following lines in a Checkout controller for a short time:

#File: app/code/core/Mage/Checkout/controllers/OnepageController.php


public function successAction()
{
$session = $this->getOnepage()->getCheckout();
// if (!$session->getLastSuccessQuoteId()) {
// $this->_redirect('checkout/cart');
// return;
// }
...

Now you are allowed to reload a success page. You can also see the following call near the end of this method in the last versions of Magento:


$session->clear();

This will help you to make the checkout success page to be shown one time. In case you work with the last order number and/or last order object you' ll probably comment this out. The information between page reloads will be saved.

A bit more ideas for testing the customized success page...

Fortunately there is an extra way to test a success-page. No boring steps, no new order creation. Using free testing tool you can preview the Magento checkout success page without coming through the whole checkout flow. Why not try out.

What about ready to use Magento checkout success page?

Customizing the order confirmation page can take a long time. If you are a too busy person, you will likely value ready Success Page solution. Therefore you find helpful a Success Page module built in FireCheckout extension. Through the module interface, you can enable the display of 2 static blocks without editing the template file. You can place CMS blocks either above or below the basic order information. Any kind of additional content can be placed there: cross-sells, promotional content, polls, social media links, discount coupon, etc.

We would also like to draw your attention to Advanced Checkout Success Page extension. This module comes with 10 predefined blocks. You can move them and show anywhere on Magento Thank-you page. The module allows you to add custom javascript to the success page, that can help you make the best of checkout success page layout.

Summary

Hope this post will help you to design a custom checkout success page and make it easy to get feedback.

You can also review some more useful articles that will help you to experiment with Magento functionality:

In case you have a question or other tips to customize the order confirmation page, please post comments.

Recomended Magento Extensions

2 thoughts on “5 ideas how to edit Magento checkout success page”

Leave a Reply