Question

How to add a custom block within checkout cart summary in magento 2

enter image description here

Was it helpful?

Solution

You need to create this file in your custom module/theme to add custom Block on cart page.

app/code/Vendor/Module/view/frontend/layout/checkout_cart_index.xml

Content for this file is..

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="checkout.cart.totals.container">
            <block class="Magento\Framework\View\Element\Template" name="checkout.cart.custom.block" before="checkout.cart.totals" template="Vendor_Module::custom-block.phtml" />
        </referenceContainer>
    </body>
</page>

You need to create one template file here in your module or your theme.

app/code/Vendor/Module/view/frontend/templates/custom-block.phtml

Content for this file..

<?php echo "Custom Block"; ?>

Output :

enter image description here

Hope this will help you!

OTHER TIPS

You need to create layout file checkout_cart_index.xml at below path and paste this below code :

app/code/VendorName/ModuleName/view/frontend/layout/checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="cart.summary">
        <block name="summary.custom.block" class="Magento\Framework\View\Element\Template"  template="VendorName_ModuleName::temp.phtml" after="checkout.cart.shipping" />
    </referenceContainer>
</body>
</page>

Add this phtml file :

app/code/VendorName/ModuleName/view/frontend/templates/temp.phtml

<?php echo __("Hello"); ?>

Cache clean and refresh the page.

Just override checkout_cart_index.xml file and add your custom block using after or move keyword

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top