How to Add Custom Block in Checkout Success Page in Magento 2
The importance of optimizing the “Thank You” page in E-commerce can’t be stressed enough. It is the best option to nurture the leads and get the most out of the customers who have once trusted you with their money!
Neil Patel shares how to increase ROI on the thank you page. However, for Magento 2 store owners, it is not going to be easy with the default success page after checkout.
Hence, I have come up with a solution that can be useful to optimize the thank you page in Magento 2 store. The below programmatic method is to add custom block in checkout success page in Magento 2.
The method can be used to add social media buttons, newsletter subscription buttons, coupon code blocks, more product suggestions, etc.
Get as much creative as you can and optimize the Magento 2 checkout success page to boost the conversion, improve the customer experience, and benefit the business!
Method to Add Custom Block in Checkout Success Page in Magento 2:
- Create registration.php file in app\code\[Vendor]\[Namespace]\123456<?php\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::MODULE,'[Vendor]_[Namespace]',__DIR__);
- Create module.xml file in app\code\[Vendor]\[Namespace]\etc12345<?xml version="1.0"?><config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"><module name="[Vendor]_[Namespace]" setup_version="1.0.0"/></config>
- Create checkout_onepage_success.xml file in app\code\[Vendor]\[Namespace]\view\frontend\layout1234567891011<?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"><body><referenceContainer name="order.success.additional.info"><block class="Magento\Checkout\Block\Onepage\Success" name="custom.order.success"template="[Vendor]_[Namespace]::order/success.phtml" after="-"></block></referenceContainer></body></page>
- Create success.phtml in app\code\[Vendor]\[Namespace]\view\frontend\templates\order\12<?phpecho "Here Additional Information"; //Bussiness logic
That’s it.
Any doubts in the implementation? Please mention them in the Comments section below and I’d be glad to help you out.
Feel free to share the above solution with fellow developers on social media.
Thanks!
5 Comments
Hi there, im quite new to Magento – I’m trying to add Facebook Pixel to a Magento site.
Which i did by adding the standard pixel code to the head section under the configuration settings with a standard event. Im now trying to track the event purchase but only in the Cart page once the transaction is ‘successful’.
I’ve read that i would have to add the following:
fbq(‘track’, ‘Purchase’, {
value: 0.01,
currency: ‘ZAR’
});
to the success.phtml file. Is this correct? How do i even check that it is working without having to reach the ‘success’ event?
Hello Buhle,
Yes, this is the correct file.
The success event should be fired to check.
Thank You.
I do this but success page does not appear
Hello,
If it is redirecting to the order success page once an order is placed, then it will work otherwise you need to check the reference of the theme that is currently in use.
Have you removed or moved reference?
Thank You.
Without any doubt, thank you page plays a very vital role in increasing ROI of any online business.
Thank you for sharing this useful tutorial!