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! :)
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());
}
});
});
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
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 -->
