I would like to override the below file & display my custom block in the li.


<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" data-bind="i18n: 'Shipping Address'" data-role="title"></div>

<!-- ko if:myBlock --> // Mine need to call block created from Admin
    <p data-bind="html: myBlock"></p>
<!-- /ko -->

<!--Shipping method template-->
<li id="opc-shipping_method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    <div class="checkout-shipping-method">
        <div class="step-title" data-bind="i18n: 'Shipping Methods'" data-role="title"></div>

If the block is enabled in the admin then it will show a custom li with the block data, otherwise it shows nothing.

Can we check directly in the .html file whether the block is enabled or not?


Here I give example to show custom block above shipping method of checkout

  1. Create di.xml at


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
            <argument name="configProviders" xsi:type="array">
                <item name="cms_block_config_provider" xsi:type="object">Vendor\Module\Model\ConfigProvider</item>
  1. Create ConfigProvider.php to define your static block to windows.checkoutConfig



namespace Vendor\Module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;

class ConfigProvider implements ConfigProviderInterface
    /** @var LayoutInterface  */
    protected $_layout;

    public function __construct(LayoutInterface $layout)
        $this->_layout = $layout;

    public function getConfig()
        $myBlockId = "my_static_block"; // CMS Block Identifier
        //$myBlockId = 20; // CMS Block ID

        return [
            'my_block_content' => $this->_layout->createBlock('Magento\Cms\Block\Block')->setBlockId($myBlockId)->toHtml()
  1. Override checkout_index_index.xml in your module and define your own shipping component


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="before-shipping-method-form" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="shipping_custom_block" xsi:type="array">
                                                                            <item name="component" xsi:type="string">Vendor_Module/js/view/shipping/customblock</item>
  1. Now create shipping.js and define your own shipping template file


    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/shipping/customblock'

            initialize: function () {
                var self = this;

  1. Create customblock.html

<div data-bind="html: window.checkoutConfig.my_block_content"></div>

Here I add new product widget in my static block


enter image description here

  • i have did the same but not working. i cant see static block content at this tab. – Sarfaraj Sipai Dec 21 '17 at 8:52
  • 1
    @VinayaMaheshwari place your block div at the last in shipping.html to show block after shipping method – Prince Patel May 25 '18 at 12:05
  • 1
    @VinayaMaheshwari It must be browser cache. Check this answer for diffrent way to check changes of knockout js and html files: magento.stackexchange.com/a/227290/35758 – Prince Patel May 25 '18 at 12:41
  • 1
    Yeah! it was browser cache, thanks for your help. – Vinaya Maheshwari May 25 '18 at 12:58
  • 1
    its not working – Divya Sekar Jun 26 '19 at 11:36

This is what I did to display a CMS block on checkout page under sidebar. 1. In the templates/onepage.phtml I created a js variable to hold the cms block content like this:

<?php $myCmsBlock = $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('my_cms_block')->toHtml() ?>

<script type="text/javascript">
    var my_cms_block = <?php echo json_encode($myCmsBlock)?>;

2. In the knockout template file (in my case it was web/js/template/sidebar.html), displayed the cms block content from the above js variable like this:

<div class="opc-help-cms" data-bind="html:my_cms_block">

Hope this helps someone! Thanks!

  • Simple solution. Just needed to prepare custom onepage.phtml. I used this magento.stackexchange.com/questions/127150/… – Gediminas Oct 27 '17 at 14:03
  • do you know what should i do if i want to add it to payment step? i tried to add what you mentioned above to vendor/magento/module-checkout/view/frontend/web/template/onepage.html and payment.html but doesn't make any effect. magento.stackexchange.com/questions/296500/… – Mage Explorer Nov 21 '19 at 23:00
  • payment.html should be able to access the js variable from onepage.phtml. Make sure its rendered properly by printing it on console in checkout page – Siju Joseph Dec 5 '19 at 11:27

add static block in phtml fie :

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

add block using XML :

<referenceContainer name="content">
    <block class="Magento\Cms\Block\Block" name="block_identifier">
         <argument name="block_id" xsi:type="string">block_identifier</argument>

add block in cms page :

{{block class="Magento\Cms\Block\Block" block_id="block_identifier"}}

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.