How to edit Magento order success page?
Our FireCheckout includes the Checkout Success page module. This enables Magento 2 to get order items on the success page. This is a new way to connect with your customers to offer relevant information about the order.
To start modifying the success page, go to Stores - Configuration - Swissup section - Checkout - Success Page.
The module configuration has 3 sections: General, Page Layout, CMS blocks.
General
In the Enabled field, select Yes to enable the module.
In the Miscellaneous scripts and HTML field, you can insert Javascript, CSS, or HTML code. For instance, you can add Google Adwords conversion code. Check the Miscellaneous scripts snippets page for more samples. This field allows for using variables:
| Variable | Description | Extension version |
|---|---|---|
| {{orderId}} | Order number | 1.1.0 |
| {{orderAmount}} | Order Grand Total | 1.1.0 |
| {{orderBaseAmount}} | Order grand total in base currency (useful for multi currency stores) | 1.1.0 |
| {{orderItems}} | Array of items from order where every item is JSON object | 1.1.3 |
| {{orderBillingAddress}} | JSON object with billing address data | 1.1.4 |
| {{orderShippingAddress}} | JSON object with shipping address data | 1.1.4 |
| {{currency}} | Order currency | 1.1.0 |
| {{currencySymbol}} | Order currency symbol | 1.1.0 |
| {{customerEmail}} | Email of customer who placed an order | 1.1.0 |
| {{customerId}} | Id of customer who placed an order | 1.1.0 |
| {{paymentCode}} | Code of payment method for an order | 1.1.0 |
| {{paymentTitle}} | Name of payment method for an order | 1.1.0 |
| {{shippingCode}} | Code of shipping method for an order | 1.1.0 |
| {{shippingTitle}} | Name of shipping method for an order | 1.1.0 |
Most of the variables came with extension version 1.1.0. But there are some that require a higher version. Please check the column Extension version.
Page Layout
In the section, you can use the drag-and-drop interface to modify the checkout success page layout. We built a Success page with predefined blocks that can be arranged in any way you want.
In the Blocks available on Success Page field, you can see a list of available blocks for the Success page. It is not possible to edit them. You can only grab one of those blocks and drop it on the success page layout field.
The layout of the Success Page is a schematic representation of the success page. The module divides the page content into 4 segments - top, bottom, middle-left, and middle-right. You can move blocks from one segment to another. You can delete a block by clicking on the trash bin icon on the right side of the block. The icon appears when hovering over the block.
In the Order# to Preview success page field, you have to input the order number and press the Save and Start Preview buttons.
CMS blocks
The Above order information and Below order information fields are for assigning CMS block to the respective one on the checkout success page.
