{"id":2244,"date":"2025-01-02T16:45:04","date_gmt":"2025-01-02T14:45:04","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=2244"},"modified":"2025-06-24T16:34:02","modified_gmt":"2025-06-24T13:34:02","slug":"how-to-customize-magento-2-checkout-success-page","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/magento-2-checkout-success-page","title":{"rendered":"How to Customize Magento 2 Checkout Success Page"},"content":{"rendered":"\n
\"How<\/figure>\n\n\n\n

The checkout success page, also known as the thank you page, appears on the website when the item is paid. This page is designed to express gratitude for completed orders and display key details about the purchase. Although, by default, the Magento 2 checkout success page is quite generic and simple, you may enhance it and create an engaging page that encourages repeat sales. So, to create such a page, you need to customize the checkout success page in Magento 2.<\/p>\n\n\n\n

In this tutorial, we prepared a step-by-step guide on how to add a block to the checkout success page to optimize this page and create a seamless user experience.<\/p>\n\n\n\n

Want to build a beautiful success page without writing any code? Discover our powerful Magento 2 Checkout Success Page Extension<\/a>. <\/p>\n\n\n\n

Method 1: Adding Custom Block to the Magento 2 Checkout Success Page (Via Admin Panel)<\/h2>\n\n\n\n

Magento 2 provides a fairly simple and convenient method to add a custom block to the checkout success page using only the admin panel without the necessity to edit files. So, let\u2019s get started!<\/p>\n\n\n\n

Step 1. Creating a CMS block<\/h3>\n\n\n\n

The following method is based on CMS blocks. At this stage, you need to create and configure a CMS block, including specifying the content you need to display.<\/p>\n\n\n\n

To create a CMS block, navigate to Content -> Blocks<\/strong> in the menu and click the Add New Block button.<\/p>\n\n\n\n

\"Method<\/figure>\n\n\n\n

You’ll see the CMS block creation form, where you need to specify the block name, its ID, store view, and its content.<\/p>\n\n\n\n

\"Method<\/figure>\n\n\n\n

Step 2. Configuring the widget to render the CMS block<\/h3>\n\n\n\n

After creating a CMS block, it will not display automatically. Therefore, you need to add a widget to render the block.<\/p>\n\n\n\n

\n

Step-by-step guide:<\/p>\n\n\n\n

  1. To set up the widget, navigate to Content -> Widgets<\/strong> in the admin panel and click Add Widget<\/em>.<\/li>
  2. In the widget creation form, select CMS Static Block for the Type field and choose your active theme for the Design Theme field.<\/li>
  3. Name the widget, assign it to the store views where it should appear, and set the sort order.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
    \"Method<\/figure>\n\n\n\n

    Next, we proceed to the Layout Updates section, which determines where the block will be displayed. To have the block appear on our custom Magento 2 Checkout Success Page, set the following fields:<\/p>\n\n\n\n

    \n

    Step-by-step guide:<\/p>\n\n\n\n

    1. Select Specified Page<\/em> in the Display on field.<\/li>
    2. Choose One Page Checkout Success<\/em> in the Page field.<\/li>
    3. Specify the container in which the block will be placed.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
      \"Method<\/figure>\n\n\n\n

      The final step is to select the CMS block that you want to display. To do this, follow the next steps:<\/p>\n\n\n\n

      \n

      Step-by-step guide:<\/p>\n\n\n\n

      1. Navigate to the Widget Options tab.<\/li>
      2. In the Block field, select the previously created block.<\/li>
      3. Save the widget.<\/li>
      4. Clear the Magento cache so that the changes are reflected on the frontend.<\/li><\/ol>\n\n\n\n

        <\/p>\n<\/div><\/div>\n\n\n\n

        Here is the example:<\/p>\n\n\n\n

        \"Method<\/figure>\n\n\n\n

        Method 2: Adding a Custom Block to the Magento 2 Checkout Success Page (Via Custom Extension)<\/h2>\n\n\n\n

        Magento 2 also allows you to add custom blocks to the checkout success page via the admin panel without editing the code. However, this method provides quite limited capabilities, and often websites require a more flexible approach that can be implemented programmatically.<\/p>\n\n\n\n

        Let\u2019s take a closer look at creating a custom extension to display a custom block.<\/p>\n\n\n\n

        Step 1: Creating a custom module<\/h3>\n\n\n\n

        To register your module in Magento, create a registration.php<\/code> file following the path app\/code\/VendorName\/ModuleName\/registration.php<\/code>. Here is the file content:<\/p>\n\n\n\n

        <\/div>
        <?php\n\n\nuse Magento\\Framework\\Component\\ComponentRegistrar;\n\n\nComponentRegistrar::register(ComponentRegistrar::MODULE, 'VendorName_ModuleName', __DIR__);<\/code><\/pre><\/div>\n\n\n\n
        Now you need to create a module.xml file. To accomplish this, create a file with the following path app\/code\/VendorName\/ModuleName\/etc\/module.xml<\/code> and locate the code within that file:<\/p>\n\n\n\n
        <\/div>
        <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n       xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n   <module name=\"VendorName_ModuleName\"\/>\n<\/config>\n<\/code><\/pre><\/div>\n\n\n\n
        Step 2: Implementing custom block output<\/h3>\n\n\n\n
        Now let’s move on to displaying the custom block on the Magento 2 Checkout Success Page.<\/p>\n\n\n\n
        Create checkout_onepage_success.xml file following this path: app\/code\/VendorName\/ModuleName\/view\/frontend\/layout\/checkout_onepage_success.xml<\/code>.<\/p>\n\n\n\n
        Here is the file content:<\/p>\n\n\n\n
        <\/div>
        <?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n   <body>\n       <referenceContainer name=\"content\">\n           <block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"custom.coupon_block\" template=\"VendorName_ModuleName::coupon.phtml\" after=\"-\" \/>\n       <\/referenceContainer>\n   <\/body>\n<\/page>\n<\/code><\/pre><\/div>\n\n\n\n
        Create coupon.phtml, here is the path: app\/code\/VendorName\/ModuleName\/view\/frontend\/templates\/coupon.phtml<\/code>. The content:<\/p>\n\n\n\n
        <\/div>
        <div style=\"background-color:#333; color:#ffcc00; text-align:center; padding:20px;\">\n   <p style=\"margin: 0;\">COME BACK SOON! USE THIS CODE FOR 10% OFF YOUR NEXT ORDER:<\/p>\n   <div style=\"background-color:white; color:#ff8c00; display:inline-block; border-radius:5px; font-weight:bold;\">\n       SUMMERTIME10\n   <\/div>\n<\/div>\n<\/code><\/pre><\/div>\n\n\n\n
        Below is an example of the expected result:<\/p>\n\n\n\n
        \n
        Important Information:<\/p>\n\n\n\n
        You can also display the CMS block by changing the contents of the checkout_onepage_success.xml<\/code> file to the following:<\/p>\n\n\n\n
        <\/div>
        <?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n   <body>\n       <referenceContainer name=\"content\">\n           <block class=\"Magento\\Cms\\Block\\Block\" name=\"custom.coupon_block\" after=\"-\" >\n               <arguments>\n                   <argument name=\"block_id\" xsi:type=\"string\">additional_checkout_success_page_block<\/argument>\n               <\/arguments>\n           <\/block>\n       <\/referenceContainer>\n   <\/body>\n<\/page>\n<\/code><\/pre><\/div>\n\n\n\n
        In this example, additional_checkout_success_page_block<\/code> is the CMS block ID that needs to be displayed. Make sure a CMS block with this ID exists in your Magento.<\/p>\n<\/div><\/div>\n\n\n\n
        Method 3: Using Magento 2 Checkout Success Page Extension for Easy Customization<\/h2>\n\n\n\n
        The customization process is often not that easy, as it requires both technical knowledge and time. For those looking for reliable and tailored solutions, use the Checkout Success Page extension<\/a> that provides a streamlined and quick way to customize the checkout success page in Magento 2.<\/p>\n\n\n\n
        It offers a range of features designed to help you build a checkout success page that \u0438\u0449\u0435\u0440 meets your business needs and delights your customers. For example, by leveraging the Magento 2 Checkout Success page extension, you can:<\/p>\n\n\n\n