Menu Close
    Hire us Request quote Reading list Switch to dark mode

    Display custom price fee on checkout cart and summary total in magento2

    To display Custom price fee on checkout/cart page or in summary cart you can follow following process :

    First add Custom price fee in your total, Please refer following blog:

    How to add custom price/fee in order total magento2

    Now, create js file which allow to display the amount on checkout cart total, file path is:


    and define js file for checkout summary, create file at path:


    Now, define template file to display it on page, file path:


    Now, define template file for checkout cart total, file path is:


    And , now define these js files in xml file, on checkout_cart_index.xml.

    File path is: app\code\Webkul\Test\view\frontend\layout\checkout_cart_index.xml

    Now, add file for checkout_index_index page, file path is:


    Now, execute bin\magento setup:static-content:deploy command from ssh terminal.

    And your custom fee amount will displayed on checkout cart total and checkout summary page.

    Thank you. 🙂

    To display custom price/fee amount in sales order view , then refer blog:

    How to display custom price fee in sales order view page

    . . .

    Comments (8)

    Add Your Comment

  • tallenmusclegeeks
    on the cart page i can see the Custom Fee text but getting a js error as follows :

    customfee.js:25 Uncaught TypeError: Cannot read property ‘value’ of null

    on line price = totals.getSegment(‘customfee’).value; of file checkoutcarttotalscustomfee.html

    Can you please reply ?

    • Bulbul agarwal
      Have to define customfee in sales.xml and model file?
      • tallenmusclegeeks
        yes i have following in my sales.xml :

        and in Model :

        public function collect(
        MagentoQuoteModelQuote $quote,
        MagentoQuoteApiDataShippingAssignmentInterface $shippingAssignment,
        MagentoQuoteModelQuoteAddressTotal $total
        ) {
        parent::collect($quote, $shippingAssignment, $total);

        $exist_amount = 0; //$quote->getCustomfee();
        $customfee = 5; //enter amount which you want to set
        $balance = $customfee – $exist_amount;//final amount

        $total->setTotalAmount(‘customfee’, $balance);
        $total->setBaseTotalAmount(‘customfee’, $balance);


        $total->setGrandTotal($total->getGrandTotal() + $balance);
        $total->setBaseGrandTotal($total->getBaseGrandTotal() + $balance);

        return $this;

        i have used the same name as in your example only the namespace and module name is changed.

      • tallenmusclegeeks
        also fetch function is as :

        public function fetch(MagentoQuoteModelQuote $quote, MagentoQuoteModelQuoteAddressTotal $total)
        return [
        ‘code’ => ‘Customfee’,
        ‘title’ => ‘Custom Fee 1’,
        ‘value’ => 5

        • Bulbul agarwal
          You have to define calculate function first, because here we get data from the totals, so in calculate function data sets to the totals.

          and as per your last reply, in fetch function code name should be same as you used in your js file, which is “customfee”

          • tallenmusclegeeks
            Apparently it was just due to C instead of c in the fetch method, thanks a lot Bulbul. I owe you for this.

            but pls change the entry in your post to small c as well.

          • Bulbul agarwal
            Changes are updated in blog.
          • tallenmusclegeeks
            Also on your next tutorial i.e : custom price/fee amount in sales

            You need to change <referenceContainer to <referenceBlock in sales_order_view.xml

  • Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just received your message and our expert will get back to you shortly.
    Send Again