The default Magento 2 does not provide Edit and Remove product button in Order summary on the checkout page. But, it provides on Cart page and Mini-cart.

Follow the below instructions to set Edit and Remove product button Order summary on the checkout page.

Override details.html file in your theme

/app/design/frontend/[VendorName]/[theme]/Magento_Checkout/web/template/summary/item/details.html

And add below code in this file

<div class="primary">
    <a data-bind="attr: {href: getConfigUrl($parent.item_id),title: $t('Edit item')}" class="action edit">
        <span data-bind="i18n: 'Edit'"></span>
    </a>
</div>
<div class="secondary">
    <a href="#" data-bind="attr: {'data-post': getDataPost($parent.item_id),title: $t('Delete item')}" class="action delete">
        <span data-bind="i18n: 'Remove'"></span>
    </a>
</div>

</a>

</div>

</a>

</div>

Override details.js file in your theme

/app/design/frontend/[VendorName]/[theme]/Magento_Checkout/web/js/view/summary/item/details.js

define(
    [
        'uiComponent',
        'mage/url',
        'Magento_Customer/js/customer-data',
        'jquery',
        'ko',
        'underscore',
        'sidebar',
        'mage/translate'
    ],
    function (Component,url,customerData,$,ko, _) {
        "use strict";
        return Component.extend({
            defaults: {
                template: 'Magento_Checkout/summary/item/details'
            },
            getValue: function(quoteItem) {
                var itemId = elem.data('cart-item'),
                itemQty = elem.data('item-qty');
                return quoteItem.name;
            },
            getDataPost: function(itemId) { 
                console.log(itemId);
                var itemsData = window.checkoutConfig.quoteItemData;
                var obj = {};
                var obj = {
                    data: {}
                };

                itemsData.forEach(function (item) {
                    if(item.item_id == itemId) { 
                        var mainlinkUrl = url.build('checkout/cart/delete/');
                        //var baseUrl = url.build('checkout/cart/');
                        var baseUrl = url.build('checkout/');
                        console.log(mainlinkUrl);
                        obj.action = mainlinkUrl;
                        obj.data.id= item.item_id;
                        obj.data.uenc = btoa(baseUrl);
                    }
                });
                return JSON.stringify(obj);
            },
            getConfigUrl: function(itemId) { 
                var itemsData = window.checkoutConfig.quoteItemData;
                var configUrl = null;
                var mainlinkUrl = url.build('checkout/cart/configure');
                var linkUrl;
                itemsData.forEach(function (item) {
                    var itm_id = item.item_id;
                    var product_id = item.product.entity_id;
                    if(item.item_id == itemId) { 
                        linkUrl = mainlinkUrl+"/id/"+itm_id+"/product_id/"+product_id;
                    }
                });
                if(linkUrl != null) {
                    return linkUrl;
                }
                else {
                    return '';
                }

            }
        });
    }
);

define(

[

'uiComponent',

'mage/url',

'Magento_Customer/js/customer-data',

'jquery',

'ko',

'underscore',

'sidebar',

'mage/translate'

function (Component,url,customerData,$,ko, _) {

"use strict";

return Component.extend({

defaults: {

template: 'Magento_Checkout/summary/item/details'

getValue: function(quoteItem) {

var itemId = elem.data('cart-item'),

itemQty = elem.data('item-qty');

return quoteItem.name;

getDataPost: function(itemId) {

console.log(itemId);

var itemsData = window.checkoutConfig.quoteItemData;

var obj = {};

var obj = {

data: {}

};

itemsData.forEach(function (item) {

if(item.item_id == itemId) {

var mainlinkUrl = url.build('checkout/cart/delete/');

//var baseUrl = url.build('checkout/cart/');

var baseUrl = url.build('checkout/');

console.log(mainlinkUrl);

obj.action = mainlinkUrl;

obj.data.id= item.item_id;

obj.data.uenc = btoa(baseUrl);

}

});

return JSON.stringify(obj);

getConfigUrl: function(itemId) {

var itemsData = window.checkoutConfig.quoteItemData;

var configUrl = null;

var mainlinkUrl = url.build('checkout/cart/configure');

var linkUrl;

itemsData.forEach(function (item) {

var itm_id = item.item_id;

var product_id = item.product.entity_id;

if(item.item_id == itemId) {

linkUrl = mainlinkUrl+"/id/"+itm_id+"/product_id/"+product_id;

}

});

if(linkUrl != null) {

return linkUrl;

}

else {

return '';

}

});

}

);

Then run below commands.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:flush

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

php bin/magento cache:flush

That’s all folks. Hope it worked for you.

Fill the below form if you have any Magento programming need.

Magento 2 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-628456f89310a100752381/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on the...

Author Info

Hire R. Patel

Fill the form & Get Installation Support

How to add Edit and Remove product button in Order summary on Checkout page?

Recent Articles

Author Info

Get a Free Quote

Connect With Us