How to Add CMS Block to Checkout in Magento 2?

Thank you page or checkout success page is one of the most valuable pages in the customer journey on your store. Correspondingly, it's important to optimise it to increase customer engagement and ROI.

The best way to achieve this is through adding CMS block to checkout in Magento, which could lead anywhere from blog to catalog and customer accounts.

In this guide, you'll learn how to add custom CMS block to checkout page in Magento using different tools. We'll also share how to display CMS blocks on checkout under different conditions using the Magento Dynamic Blocks and Pages extension.

Why Add CMS Blocks to Checkout in Magento?

Very often, merchants leave the checkout success page empty, not realising it's a perfect opportunity to keep customer engaged.

To build loyal relations and increase repeat purchases, it's recommended to use this space to add some engaging blocks, such as:

• discount offers
• loyalty program
• delivery information
• order-related instructions
• related products
• social media channels, etc.

This way, the Magento checkout page becomes a real post-purchase marketing page. So don't miss a chance and check the most common ways to make this page work for you.

How to Add CMS Block to Checkout in Magento?

You can add custom CMS blocks to checkout page in Magento using a theme, a custom module or Magento widgets.  The approach depends on the position you want to add the block to, your skills with Magento admin and permissions.

We'll cover all three options.

Step 1: Create CMS block

Regardless of the method you choose, you need to create CMS blocks in Magento first. Just go to Content > Blocks and click on Add New Block. Then enable the Block, give it a Title and Identifier and define a Store View where it will be available.

The last thing is to add the content, which depends on what you want customers to engage with.

Step 2: Create widget

Go to Content > Widgets to add a widget. Then select the CMS Static Block as the widget Type and define your theme.

Set a Widget Title, Assign it to Store Views, and set the Sort Order.

Step 3: Define the block position

The most important section that defines where the block will be displayed is Layout Updates.

Correspondingly, select Specified Page as the place to Display the block on. Then, find the One Page Checkout Success Page in the dropdown and choose the page Container.

We've decided to display it at the Main Content Bottom.

Step 4: Select the CMS block

Last but not least, choose the CMS block you've just created in the Widget Options tab and Save it.

Step 5: Flush Magento cache

The block might not appear instantly, so clean Magento caches and check the storefront again.

Once a custom block is added to the checkout success page, it should encourage customers to engage with it after they've placed an order.

This way, merchants can display anything from the "Thank You" banner to blog articles CTA. Opportunities are limitless.

How to Display CMS Block on Checkout Dynamically?

To display dynamic CMS blocks on checkout page in Magento you need Magefan Dynamic Blocks and Pages extension. It allows you to create dynamic blocks in Magento and display them under different conditions.

So everyone sees something different based on their cart, product or category attributes. 

e.g going back to the CMS block we've created, we set our travel blog banner to be displayed for someone who purchased a bag from our Bags category.

Example of the CMS block display conditions

However, you can also set these blocks to be displayed under different time, day or date conditions and replace blocks repeatedly for different customer groups. The more targeted your offer, the better the results.

How to Add CMS Block to Checkout Using a Theme?

If a store is already using a custom theme, adding a CMS block through layout XML is the simplest approach.

Step 1: Create the layout file

In the theme directory, navigate to the layout folder inside Magento_Checkout:

app/design/frontend/Vendor/theme/Magento_Checkout/layout/

Here, create a new layout handle called

checkout_onepage_success.xml

This way, Magento will automatically load the corresponding file whenever the checkout success page is open.

Step 2: Add layout settings

Inside the checkout_onepage_success.xml, paste the following code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Cms\Block\Block" name="checkout.success.cms.block">
                <arguments>
                    <argument name="block_id" xsi:type="string">checkout_success_page</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

It tells Magento to show the CMS block with the identifier checkout_success_page, which was used while creating a CMS block.

Step 3: flush Magento cache

Once the layout file is ready, don't forget to flush the Magento cache:

php bin/magento cache:clean
php bin/magento cache:flush

How to Add CMS Block to Checkout Using a Custom Module?

If you don't want to modify the theme to add CMS block to checkout page in Magento, use custom module.

Step 1: Create module structure

Create a new module in Magento in app/code/Vendor/SuccessBlock/.

The module should have the following structure:

registration.php
etc/module.xml
view/frontend/layout/checkout_onepage_success.xml

Step 2: Register the module

To register the module in Magento, create the registration.php file with the following content:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'Vendor_SuccessBlock',
    __DIR__
);

Step 3: Create the module.xml file

To declare the module to Magento, create the app/code/Vendor/SuccessBlock/etc/module.xml file and add the following:

<?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_SuccessBlock" setup_version="1.0.0"/>
</config>

Step 4: Add layout settings

To load the CMS block checkout_success_page and insert it into the success page layout, create the view/frontend/layout/checkout_onepage_success.xml file with the following layout configurations:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Cms\Block\Block" name="checkout.success.cms.block">
                <arguments>
                    <argument name="block_id" xsi:type="string">checkout_success_page</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Step 5: Enable the module

To enable the module in Magento and apply new layout settings, run the following commands:

php bin/magento setup:upgrade
php bin/magento cache:flush

Now, when a customer places an order, Magento will automatically display CMS block on checkout success page. 

Regardless of the method you use to add a custom CMS block to Magento checkout, make sure you create an irresistible offer. It's the best way to make sure people engage and convert.