I want to add custom block below shipping methods and this custom block should be inside of shipping method form. I think following line of code is helpful for adding this.but no idea how to proceed.

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->

2 Answers 2


1. Declare module's checkout dependency


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

2. Overwrite checkout layout


<?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">
        <referenceBlock name="checkout.root">
                <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">NameSpace_ModuleName/js/view/checkout/shipping/additional-block</item>

3. Create JavaScript UI Component

Magento 2 checkout is manage in JavaScript (with Knockout). So you need to create a custom JS compnent. It's will create the link between checkout UI component and your custom HTML template.



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

    return Component.extend({
        defaults: {
            template: 'NameSpace_ModuleName/checkout/shipping/additional-block'

4. Create HTML template

Then create the HTML template wich going to display in checkout.


<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>

5. Clear cache

Finally run following commands :

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

Download full example demo module from here

  • 2
    really you are awesome.there is no end for magento community.its evergreen Dec 5, 2015 at 14:44
  • Did you get these errors? Broken reference: No element found with ID 'checkout.header.wrapper'. [] [] Class SR\AdditionalShippingBlock\Model\CustomBlockConfigProvider does not exist [] [] [2016-04-13 10:15:06] main.CRITICAL: Invalid block type: Magento\Checkout\Block\Onepage [] [] Apr 13, 2016 at 10:16
  • Tip for other noobs: the module needs to go in app/code/SR/AdditionalShippingBlock, not app/code/Magento/AdditionalShippingBlock. Apr 13, 2016 at 10:30
  • @sohel rana, i would like to dynamic dropdown instead of textfield at same place, give me suggestion for that. Thanks. May 18, 2016 at 13:43
  • Is this for real? :S wtf
    – OZZIE
    Sep 27, 2016 at 11:09

In presented file "checkout_index_index.xml" there is one small mistake. It must be

<?xml version="1.0"?>


<xml version="1.0"?>

Miss first char '?'


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.