For accesibility reasons I want to move checkout button after the sidebar. I am able to move checkout button to sidebar but I want to move it after the sidebar in the html layout. I am able to add blocks to #checkout container but it always appears before the sidebar even if I place it in web/js/template/sidebar.html after the sidebar div.

<div id="checkout" class="checkout-container">

<!-- my div appears here -->

<aside class="modal-custom opc-sidebar opc-summary-wrapper custom-slide">


<!-- I want to add div here -->


Edit 1:

Following is what I tried. It adds a div before aside but not after aside.


<script type="text/javascript">
        var my_cms_block = 'Hello world';


<div id="opc-sidebar" ...>...</div>
<div class="opc-help-cms" data-bind="html:my_cms_block"></div>

Edit 2

I tried to extend the checkout module and used sortOrder attribute but still my block loads before aside in html.


<item name="sidebar" xsi:type="array">
    <item name="sortOrder" xsi:type="string">900</item>
<item name="afterSidebar" xsi:type="array">
    <item name="sortOrder" xsi:type="string">9999999999</item>
    <item name="component" xsi:type="string">MyModule_helper/js/summary/sidebar/buttons</item>
    <item name="displayArea" xsi:type="string">afterSidebar</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">MyModule_helper/summary/sidebar/buttons</item>


<div class="afterSidebar">
    <!-- ko foreach: getRegion('afterSidebar') -->
    <!-- ko template: getTemplate() --><!-- /ko -->

Thanks in advance..

1 Answer 1


di.xml App/code/Vendor/Module/etc/frontend

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

   <type name="Vendor\Module\Model\ConfigProvider">
           <argument name="blockId" xsi:type="string">block_identifier</argument>


namespace Vendor\Module\Model;

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

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

   public function __construct(LayoutInterface $layout, $blockId)
       $this->_layout = $layout;
       $this->cmsBlock = $this->constructBlock($blockId);

   public function constructBlock($blockId){
       $block = $this->_layout->createBlock('Magento\Cms\Block\Block')
       return $block;

   public function getConfig()
       return [
           'cms_block' => $this->cmsBlock


   <div class="opc-block-shipping-information">
    <div data-bind="html: window.checkoutConfig.cms_block"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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