2

Is there a way to show free shipping text instead of $ 0.00?

I tried with a couple of answers already posted on Magento StackExchange but none of them are working. Tried to change shipping.js to return free price instead of 0. Tried to manually change that span element but I can not access it with dom.

Thanks in advance! :)

3 Answers 3

-2

Override core price.js for shipping method into your theme.

path : /vendor/magento/module-tax/view/frontend/web/js/view/checkout/shipping_method/price.js

move the file in your theme

Replace below code : /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */

/** * @api */

define([ 'uiComponent', 'Magento_Checkout/js/model/quote', 'Magento_Catalog/js/price-utils' ], function (Component, quote, priceUtils) { 'use strict';

return Component.extend({
    defaults: {
        template: 'Magento_Tax/checkout/shipping_method/price'
    },
    isDisplayShippingPriceExclTax: window.checkoutConfig.isDisplayShippingPriceExclTax,
    isDisplayShippingBothPrices: window.checkoutConfig.isDisplayShippingBothPrices,

    /**
     * @param {Object} item
     * @return {Boolean}
     */
    isPriceEqual: function (item) {
        return item['price_excl_tax'] != item['price_incl_tax']; //eslint-disable-line eqeqeq
    },

    /**
     * @param {*} price
     * @return {*|String}
     */
    getFormattedPrice: function (price) {
        //todo add format data
        if (price === 0) {
            return "Free Shipping";
        }
        return priceUtils.formatPrice(price, quote.getPriceFormat());
    }
});
});
2
  • 1
    Override is a very bad practice, during version upgrade you will face a lot of issues, better you should try preference or observer or create your own module.
    – zus
    May 29, 2020 at 7:10
  • DO NOT USE the selected answer. It's a very bad practice and it's not recommended not matter what! Sep 15, 2020 at 9:34
1

The right way to do this is adding a js mixing from a custom module.

You can install the following module from github, or follow these steps:

Step 1

Create the following path in your Magento root directory: app/code/AraujoPhillips/FreeShippingLabel

Note: Set the Vendor and Module name as you wish, but you will have to change them in the next steps too.

Step 2

Create a registration.php file into app/code/AraujoPhillips/FreeShippingLabel with the following content:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'AraujoPhillips_FreeShippingLabel',
    __DIR__
);

Step 3

Create a module.xml file into app/code/AraujoPhillips/FreeShippingLabel/etc with the following content:

<?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="AraujoPhillips_FreeShippingLabel" setup_version="0.1">
        <sequence>
            <module name="Magento_Tax"/>
        </sequence>
    </module>
</config>

Step 4

Create a requirejs-config.js file into app/code/AraujoPhillips/FreeShippingLabel/view/frontend/ with the following content:

var config = {
    'map': {
        '*': {
        'Magento_Tax/template/checkout/shipping_method/price.html':
            'AraujoPhillips_FreeShippingLabel/template/checkout/shipping_method/price.html'
        }
    },
    'config': {
        'mixins': {
            'Magento_Tax/js/view/checkout/shipping_method/price': {
                'AraujoPhillips_FreeShippingLabel/js/view/checkout/shipping_method/price-mixin': true
            },
        }
    }
};

Step 5

Create a price-mixin.js file into app/code/AraujoPhillips/FreeShippingLabel/view/frontend/web/js/view/checkout/shipping_method/ with the following content:

define([
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'Magento_Catalog/js/price-utils'
], function (Component, quote, priceUtils) {
    'use strict';

    return function (Component) {
        return Component.extend({

            /**
             * Return shipping method item price
             * @param {*} price
             * @return {*|String}
             */
            getFormattedPrice: function (price) {
                if (price === 0)
                    return 'Free shipping';

                return priceUtils.formatPrice(price, quote.getPriceFormat());
            }
        });
    }
});

Note: If you want to change the "Free shipping" label with anything else, do it here just before the if (price === 0) line.

Step 6

Create a price.html file into app/code/AraujoPhillips/FreeShippingLabel/view/frontend/web/template/checkout/shipping_method/ with the following content:

<!-- ko if:  isDisplayShippingPriceExclTax -->
<span class="price"><span class="price" data-bind="text: getFormattedPrice(method.price_excl_tax), css: method.price_incl_tax == 0 ? 'free-shipping' : ''"></span></span>
<!-- /ko -->
<!-- ko ifnot: isDisplayShippingPriceExclTax -->
<!-- ko if:  (isDisplayShippingBothPrices && (method.price_excl_tax != method.price_incl_tax))-->
<span class="price-including-tax" data-bind = "attr: {'data-label': $t('Incl. Tax')}">
    <span class="price"><span class="price" data-bind="text: getFormattedPrice(method.price_incl_tax), css: method.price_incl_tax == 0 ? 'free-shipping' : ''"></span></span>
</span>
<!-- /ko -->

<!-- ko ifnot:  (isDisplayShippingBothPrices && (method.price_excl_tax != method.price_incl_tax))-->
    <span class="price"><span class="price" data-bind="text: getFormattedPrice(method.price_incl_tax), css: method.price_incl_tax == 0 ? 'free-shipping' : ''"></span></span>
<!-- /ko -->

<!-- /ko -->
<!-- ko if:  (isDisplayShippingBothPrices && (method.price_excl_tax != method.price_incl_tax))-->
<span class="price-excluding-tax" data-bind = "attr: {'data-label': $t('Excl. Tax')}">
    <span class="price"><span class="price" data-bind="text: getFormattedPrice(method.price_excl_tax), css: method.price_incl_tax == 0 ? 'free-shipping' : ''"></span></span>
</span>
<!-- /ko -->

Note 1: The file format is .html, NOT .phtml.

Note 2: If you want to change the free-shipping class with anything else, do it in every single line which have css: method.price_incl_tax == 0 ? 'free-shipping'. You can also add an ID or any other HTML attribute.

Step 7

DO NOT forget enabling the module, flushing your caches, etc...

bin/magento module:enable AraujoPhillips_FreeShippingLabel
bin/magento setup:upgrade
bin/magento cache:flush && bin/magento cache:clean
1
  • Thanks! It works like a charm ! Jun 7 at 10:57
0

Vendor/Module/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Tax/js/view/checkout/summary/shipping':'Vendor_Module/js/view/checkout/summary/shipping',
            'Magento_Tax/template/checkout/cart/totals/shipping':'Vendor_Module/template/checkout/cart/totals/shipping',
            'Magento_Tax/template/checkout/shipping_method/price.html':'Vendor_Module/template/checkout/shipping_method/price.html'
        }
    },
    'config': {
        'mixins': {
            'Magento_Tax/js/view/checkout/shipping_method/price': {
                'Vendor_Module/js/view/checkout/shipping_method/price-mixin': true
            },
        }
    }
};

Vendor/Module/view/frontend/web/js/view/checkout/shipping_method/price-mixin.js

define([
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'Magento_Catalog/js/price-utils'
], function (Component, quote, priceUtils) {
    'use strict';

    return function (Component) {
        return Component.extend({

            /**
             * Return shipping method item price
             * @param {*} price
             * @return {*|String}
             */
            getFormattedPrice: function (price) {
                if (price === 0) {
                    return 'FREE';
                }
                return priceUtils.formatPrice(price, quote.getPriceFormat());
            }
        });
    }
});

Vendor/Module/view/frontend/web/js/view/checkout/summary/shipping.js

define(
    [
        'jquery',
        'Magento_Checkout/js/view/summary/shipping',
        'Magento_Checkout/js/model/quote'
    ],
    function ($, Component, quote) {
        var displayMode = window.checkoutConfig.reviewShippingDisplayMode;
        return Component.extend({
            // defaults: {
            //     displayMode: displayMode,
            //     template: 'Vendor_Module/checkout/summary/shipping'
            // },
           /* Added my functions */
           isFreeShipping:function(){
                if(quote && quote.shippingMethod() && quote.shippingMethod().carrier_code) {
                    var carrierCode = quote.shippingMethod().carrier_code;
                    console.log(carrierCode);
                    if(carrierCode == "freeshipping"){
                        return true;
                    }
                }
                return false;
            },
            getText:function(){
                return "FREE";
            }
        });
    }
);

Vendor/Module/view/frontend/web/template/checkout/cart/totals/shipping.html

<!-- Added custom functions with core function -->
    <!-- ko if: isFreeShipping() -->
    <tr class="totals shipping excl">
        <th class="mark" scope="row">
            <span class="label" data-bind="i18n: title"></span>
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </th>
        <td class="amount">
            <span  class="price" style="color:red;font-weight:bold;font-size:16px;" data-bind="text: getText(), attr: {'data-th': title}"></span>
        </td>
    </tr>
    <!-- /ko -->
    <!-- ko ifnot: isFreeShipping() -->
    <tr class="totals shipping excl">
        <th class="mark" scope="row">
            <span class="label" data-bind="i18n: title"></span>
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </th>
        <td class="amount">
            <span class="price" data-bind="text: getValue(), attr: {'data-th': title}"></span>
        </td>
    </tr>
    <!-- /ko -->

Vendor/Module/view/frontend/web/template/checkout/shipping_method/price.html

<!-- ko if:  isDisplayShippingPriceExclTax -->
<span class="price"><span class="price" data-bind="text: getFormattedPrice(method.price_excl_tax), css: method.price_incl_tax == 0 ? 'free-shipping' : ''"></span></span>
<!-- /ko -->
<!-- ko ifnot: isDisplayShippingPriceExclTax -->
<!-- ko if:  (isDisplayShippingBothPrices && (method.price_excl_tax != method.price_incl_tax))-->
<span class="price-including-tax" data-bind = "attr: {'data-label': $t('Incl. Tax')}">
    <span class="price"><span class="price" data-bind="text: getFormattedPrice(method.price_incl_tax), css: method.price_incl_tax == 0 ? 'free-shipping' : ''"></span></span>
</span>
<!-- /ko -->

<!-- ko ifnot:  (isDisplayShippingBothPrices && (method.price_excl_tax != method.price_incl_tax))-->
    <span class="price"><span class="price" data-bind="text: getFormattedPrice(method.price_incl_tax), css: method.price_incl_tax == 0 ? 'free-shipping' : ''"></span></span>
<!-- /ko -->

<!-- /ko -->
<!-- ko if:  (isDisplayShippingBothPrices && (method.price_excl_tax != method.price_incl_tax))-->
<span class="price-excluding-tax" data-bind = "attr: {'data-label': $t('Excl. Tax')}">
    <span class="price"><span class="price" data-bind="text: getFormattedPrice(method.price_excl_tax), css: method.price_incl_tax == 0 ? 'free-shipping' : ''"></span></span>
</span>
<!-- /ko -->

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.