Magento 2 add custom block below shipping method

Hello, this tutorial is about Magento 2 add custom block below shipping method.First of all i assume that you are an advance learner of magento 2.Hence you are here to learn how to add custom block below shipping method in one page check out in magento 2.Above all if you are not familiar with magento 2 please start from basics.

lets start our tutorial and focus on our topic. For example if you want to add custom block below shipping methods. And aslo this custom block should be inside of shipping method form. In this tutorial i will discuss in detail how we can do it. It is a four to five step method.And i would try to explain it in a simple way. So that you can do it efficiently.

The first step is to Declare module’s checkout dependency.

Declare module’s checkout dependency

First of all find the directory to your module file

app/code/QaisarSatti/HelloWorld/etc/module.xml

and paste the below code

<?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="QaisarSatti_HelloWorld" setup_version="0.0.1" active="true">
<sequence>
<module name="Magento_Checkout"/>
</sequence>
</module>
</config>

Now we will move to the second step which is to Overwrite checkout layout.

Overwrite checkout layout

In the

app/code/QaisarSatti/HelloWorld/view/frontend/layout/checkout_index_index.xml

directory, paste the below code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="additional_block" xsi:type="array">
<item name="component" xsi:type="string">QaisarSatti_HelloWorld/js/view/checkout/shipping/additional-block</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>

similarly the the third step is to Create JavaScript UI Component.

Create JavaScript UI Component

For your information JavaScript (with Knockout)manages checkout in Magento 2 .So for that you need to create a custom JS compnent. It will create the link between checkout UI component and your custom HTML template.

in the

app/code/QaisarSatti/HelloWorld/view/frontend/web/js/view/checkout/shipping/additional-block.js

directory, paste the below code

define([
'uiComponent'

], function (Component) {
'use strict';

return Component.extend({
defaults: {
template: 'QaisarSatti_HelloWorld/checkout/shipping/additional-block'
}
});
});

Similarly we will move to the fourth step which is to Create HTML template.

Create HTML template

Now create the HTML template wich going to be displayed in checkout.
In the

app/code/QaisarSatti/HelloWorld/view/frontend/web/template/checkout/shipping/additional-block.html

directory,use below code

<div class="checkout-block" id="block-custom">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>

Now the fifth and final step is to clear cache.

clear cache

Finally run following commands to clear cache:

php bin/magento cache:clean
php bin/magento setup:upgrade
chmod -R 777 var/*

That’s it in this tutorial. Certainly, i have tried to explain these codes and their logic in a simple way, i hope they help you learn in an easy and better way.

Since these tutorials are for learning purpose please feel free to drop any suggestions or queries in comments section. That will definitely be highly appreciated.

Qaisar Satti

Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!