The shopping cart is like a bridge between shoppers & sellers and It’s hard to brief importance of cart page because ultimately it is one of the biggest choke points from every customer passes through while making a purchase of product or services. That’s why instead of giving more look and feel to the store design, store owner needs to streamlined whole shopping funnel. Also, some store owners redesigned whole cart interface to make the shopping experience easier, convenient and super clear by keeping only important things to cart page.
Having a Magento as a flexible platform, we have optimized several cart pages, to fulfill business needs by delivering optimized and crystal-clear interface to make the whole shopping process as easy as having a sip of coffee. Recently, one of our clients came up with the requirement of adding an extra column to display some product-related remarks to store cart page so the customer can keep things in mind before making a purchase.
Firstly, you need to create ‘AbstractCart.php’ file at below location.
app\code\Vendor\Extension\Block\Cart\AbstractCart.php
<pre class="lang:default decode:true">
<?php
namespace Vendor\Extension\Block\Cart;
class AbstractCart
{
public function afterGetItemRenderer(\Magento\Checkout\Block\Cart\AbstractCart $subject, $result)
{
$result->setTemplate('[vendor\Extension]::cart/item/default.phtml');
return $result;
}
}
</pre>
Now you need to create another ‘di.xml’ file inside your extension folder at given location using following location.
app\code\Vendor\Extension\etc\di.xml
<pre class="lang:default decode:true">
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Cart\AbstractCart">
<plugin name="cart-item-override" type="Vendor\Extension\Block\Cart\AbstractCart" sortOrder="1"/>
</type>
</config>
</pre>
Now you have to copy required code from default Magento cart ‘default.phtml’ file,
vendor\magento\module-checkout\view\frontend\templates\cart\item\default.phtml
to your custom extension ‘default.html’ file created at below path.
app\code\Vendor\Extension\view\frontend\templates\cart\item\default.phtml
Because we are willing to add new column that’s why we will add new here. Beside that you can also add your own custom code as per your requirement.
<pre class="lang:default decode:true">
<td class="col">
<textarea rows="4" class="remarks"></textarea>
</td>
</pre>
Once you have added column, now we need to add specify header using below code inside ‘checkout_cart_index.xml’ file at below location.
app\code\Vendor\Extension\view\frontend\layout\checkout_cart_index.xml
<pre class="lang:default decode:true">
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.cart.form">
<action method="setTemplate">
<argument name="template" xsi:type="string">Vendor_Extension::cart/form.phtml</argument>
</action>
</referenceBlock>
</body>
</page>
</pre>
Lastly, you have to copy required code from default Magento cart ‘form.phtml’ file,
vendor\magento\module-checkout\view\frontend\templates\cart\form
to your custom extension ‘form.html’ file created at below path and place a column in table sequence to display your column.
app\code\Vendor\Extension\view\frontend\template\cart\form.phtml
<pre class="lang:default decode:true">
<th class="col item" scope="col"><span><?= /* @escapeNotVerified */ __('Remarks with product') ?></span></th>
</pre>
And that’s it! You can try and explore more by adding and testing various logic according to your requirements of adding column to cart page.
Comment down below if you are looking for any help regarding this code.
Happy Coding!
