Show free shipping text instead of $ 0.00
-
15-04-2021 - |
Question
Is there a way to show free shipping text instead of $ 0.00?
I tried with couple of answers already posted on magento stackexchange but non 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! :)
Solution
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());
}
});
});
OTHER TIPS
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