Shipping method form in checkout page

Question

In checkout/cart page sidebar listing the Shipping Method, in that, if my shipping is free need to set like "Free" now it displays "$0.00". Please check the attachment and let me know.

Thank you

Answer 1

To achieve this requirement you need to override two files...

Step1: Copy /vendor/magento/module-checkout/view/frontend/web/js/view/summary/shipping.js to app/design/frontend/[vendor]/[Theme]/Magento_Checkout/web/js/view/summary/shiping.js and override getValue function alone with below code

   getValue: function () {
        var price;

        if (!this.isCalculated()) {
            return this.notCalculatedMessage;
        }
        price =  this.totals()['shipping_amount'];

        if(price < 1){
          return 'Free';
        }

        return this.getFormattedPrice(price);
    }

Step2: Copy /vendor/magento/module-tax/view/frontend/web/js/view/checkout/summary/shipping.js to app/design/frontend/[vendor]/[Theme]/Magento_Tax/web/js/view/checkout/summary/shiping.js and override both getIncludingValue and getExcludingValue function with below code

   getIncludingValue: function () {
        var price;

        if (!this.isCalculated()) {
            return this.notCalculatedMessage;
        }
        price = this.totals()['shipping_incl_tax'];

        if(price < 1){
          return 'Free';
        }

        return this.getFormattedPrice(price);
    },

    /**
     * @return {*}
     */
    getExcludingValue: function () {
        var price;

        if (!this.isCalculated()) {
            return this.notCalculatedMessage;
        }
        price = this.totals()['shipping_amount'];

        if(price < 1){
           return 'Free';
        }

        return this.getFormattedPrice(price);
    }