How to add custom column in cart page in Magento 2

Nov 7, 2024 4 min read

By default, customer can be see all the Product name, Image, choose options, price, quantity and subtotal columns display inside the grid after he add product to the cart.

Now, if you want to add more details inside the grid on the checkout cart page then, you need to customize for that. Let’s see the steps below for that. In this example, I added the product sku column on the shopping cart page.

1: Register Module

Let's say, we have created a module SMG_CustomCheckoutRenderer with a registration.php and module.xml.

registration.php app/code/SMG/CustomCheckoutRenderer/registration.php

<?php
declare(strict_types=1);
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'SMG_CustomCheckoutRenderer',
    __DIR__
);

module.xml app/code/SMG/CustomCheckoutRenderer/etc/module.xml

<?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="SMG_CustomCheckoutRenderer">
        <sequence>
            <module name="Magento_Checkout" />
        </sequence>
    </module>
</config>

2: Override checkout.cart.form

Create layout file checkout_cart_index.xml inside the module and paste the below code for add column name inside grid :

<?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 class="Magento\Checkout\Block\Cart" name="checkout.cart.form">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">SMG_CustomCheckoutRenderer::cart/form.phtml</argument>
            </action>
            <block class="Magento\Framework\View\Element\RendererList" name="checkout.cart.item.renderers.override" as="renderer.list.custom"/>
            <arguments>
                <argument name="renderer_list_name" xsi:type="string">checkout.cart.item.renderers.override</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Copy vendor/magento/module-checkout/view/frontend/templates/cart/form.phtml and paste inside your module respectively. Then place the below code in <th> tag.

<th class="col sku" scope="col"><span><?= $block->escapeHtml(__('SKU')) ?></span></th>

3: Override checkout.cart.item.renderers

Then, Create checkout_cart_item_renderers.xml file in your module layout folder and paste the below code for add column value inside grid.

<?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">
    <update handle="checkout_item_price_renderers"/>
    <body>
        <referenceBlock name="checkout.cart.item.renderers.override">
            <block class="Magento\Checkout\Block\Cart\Item\Renderer" as="default" template="SMG_CustomCheckoutRenderer::cart/item/default.phtml" />
            <block class="Magento\Checkout\Block\Cart\Item\Renderer" as="simple" template="SMG_CustomCheckoutRenderer::cart/item/default.phtml" />
        </referenceBlock>
    </body>
</page>

Now, for add product sku value dynamic inside product grid create default.phtml and paste the below code. Before paste the code copy file from vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml and paste on app/code/RH/CustomCheckoutRenderer/view/frontend/templates/cart/item/ path :

<td class="col sku" data-th="Sku">
    <span class="td-span-sku">
        <span class="sku-val"><?= $_item->getProduct()->getSku(); ?></span>
    </span>
</td>

Now, edit default.phtml file inside your module and then, you need to paste the above code be before <?php if ($canApplyMsrp) :?> this if condition. Then run the following command:

bin/magento setup:upgrade

Supravat Mondal

Supravat Mondal