diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index aca62285f1b..c122525c56e 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1521,19 +1521,19 @@
                   <tr id="order_total_untaxed">
                       <td class="text-right noborder">Subtotal:</td>
                       <td class="text-xl-right noborder" >
-                          <span t-field="website_sale_order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
+                          <span t-field="website_sale_order.amount_untaxed" class="monetary_field" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
                       </td>
                   </tr>
                   <tr id="order_total_taxes">
                       <td class="text-right noborder">Taxes:</td>
                       <td class="text-xl-right noborder">
-                           <span t-field="website_sale_order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}" />
+                           <span t-field="website_sale_order.amount_tax" class="monetary_field" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}" />
                       </td>
                   </tr>
                   <tr id="order_total">
                       <td class="text-right"><strong>Total:</strong></td>
                       <td class="text-xl-right">
-                          <strong t-field="website_sale_order.amount_total"
+                          <strong t-field="website_sale_order.amount_total" class="monetary_field"
                               t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
                       </td>
                   </tr>
diff --git a/addons/website_sale_coupon/views/website_sale_templates.xml b/addons/website_sale_coupon/views/website_sale_templates.xml
index e4f260beb35..fa38f91e726 100644
--- a/addons/website_sale_coupon/views/website_sale_templates.xml
+++ b/addons/website_sale_coupon/views/website_sale_templates.xml
@@ -68,10 +68,12 @@
 
 <template id="cart_discount" name="Show Discount in Subtotal" customize_show="True" active="False" inherit_id="website_sale.total">
     <xpath expr="//tr[@id='order_total_untaxed']" position="before">
-        <tr id="order_discounted" t-if="website_sale_order and website_sale_order.reward_amount">
+        <tr t-if="website_sale_order and website_sale_order.reward_amount">
           <td class="text-right noborder text-muted" title="Discounted amount">Discount:</td>
           <td class="text-xl-right noborder text-muted">
-               <span t-field="website_sale_order.reward_amount" style="white-space: nowrap;" t-options='{
+               <span t-field="website_sale_order.reward_amount" style="white-space: nowrap;"
+                 class="monetary_field"
+                 t-options='{
                           "widget": "monetary",
                           "display_currency": website_sale_order.currency_id,
                  }'/>
diff --git a/addons/website_sale_coupon_delivery/controllers/main.py b/addons/website_sale_coupon_delivery/controllers/main.py
index a04a2639eaf..113deb12126 100644
--- a/addons/website_sale_coupon_delivery/controllers/main.py
+++ b/addons/website_sale_coupon_delivery/controllers/main.py
@@ -8,6 +8,7 @@ class WebsiteSaleCouponDelivery(WebsiteSaleDelivery):
 
     @http.route()
     def update_eshop_carrier(self, **post):
+        Monetary = request.env['ir.qweb.field.monetary']
         result = super(WebsiteSaleCouponDelivery, self).update_eshop_carrier(**post)
         order = request.website.sale_get_order()
         order.recompute_coupon_lines()
@@ -16,16 +17,17 @@ class WebsiteSaleCouponDelivery(WebsiteSaleDelivery):
             currency = order.currency_id
             amount_free_shipping = sum(free_shipping_lines.mapped('price_subtotal'))
             result.update({
-                'new_amount_delivery': self._format_amount(0.0, currency),
-                'new_amount_untaxed': self._format_amount(order.amount_untaxed, currency),
-                'new_amount_tax': self._format_amount(order.amount_tax, currency),
-                'new_amount_total': self._format_amount(order.amount_total, currency),
-                'new_amount_order_discounted': self._format_amount(order.reward_amount - amount_free_shipping, currency),
+                'new_amount_delivery': Monetary.value_to_html(0.0, {'display_currency': currency}),
+                'new_amount_untaxed': Monetary.value_to_html(order.amount_untaxed, {'display_currency': currency}),
+                'new_amount_tax': Monetary.value_to_html(order.amount_tax, {'display_currency': currency}),
+                'new_amount_total': Monetary.value_to_html(order.amount_total, {'display_currency': currency}),
+                'new_amount_order_discounted': Monetary.value_to_html(order.reward_amount - amount_free_shipping, {'display_currency': currency}),
             })
         return result
 
     @http.route()
     def cart_carrier_rate_shipment(self, carrier_id, **kw):
+        Monetary = request.env['ir.qweb.field.monetary']
         order = request.website.sale_get_order(force_create=True)
         free_shipping_lines = order._get_free_shipping_lines()
         # Avoid computing carrier price delivery is free (coupon). It means if
@@ -35,7 +37,8 @@ class WebsiteSaleCouponDelivery(WebsiteSaleDelivery):
             return {
                 'carrier_id': carrier_id,
                 'status': True,
-                'new_amount_delivery': 0.0,
+                'is_free_delivery': True,
+                'new_amount_delivery': Monetary.value_to_html(0.0, {'display_currency': order.currency_id}),
                 'error_message': None,
             }
         return super(WebsiteSaleCouponDelivery, self).cart_carrier_rate_shipment(carrier_id, **kw)
diff --git a/addons/website_sale_coupon_delivery/static/src/js/website_sale_coupon_delivery.js b/addons/website_sale_coupon_delivery/static/src/js/website_sale_coupon_delivery.js
index 31934386beb..4bffd181bd4 100644
--- a/addons/website_sale_coupon_delivery/static/src/js/website_sale_coupon_delivery.js
+++ b/addons/website_sale_coupon_delivery/static/src/js/website_sale_coupon_delivery.js
@@ -20,7 +20,7 @@ publicWidget.registry.websiteSaleDelivery.include({
         this._super.apply(this, arguments);
         if (result.new_amount_order_discounted) {
             // Update discount of the order
-            $('#order_discounted').find('.oe_currency_value').text(result.new_amount_order_discounted);
+            $('#order_discounted').html(result.new_amount_order_discounted);
         }
     },
     /**
diff --git a/addons/website_sale_delivery/controllers/main.py b/addons/website_sale_delivery/controllers/main.py
index 58a9e26a36b..07868364912 100644
--- a/addons/website_sale_delivery/controllers/main.py
+++ b/addons/website_sale_delivery/controllers/main.py
@@ -31,17 +31,19 @@ class WebsiteSaleDelivery(WebsiteSale):
 
     @http.route(['/shop/carrier_rate_shipment'], type='json', auth='public', methods=['POST'], website=True)
     def cart_carrier_rate_shipment(self, carrier_id, **kw):
+        Monetary = request.env['ir.qweb.field.monetary']
         order = request.website.sale_get_order(force_create=True)
         res = {'carrier_id': carrier_id}
         carrier = request.env['delivery.carrier'].browse(int(carrier_id))
         rate = carrier.rate_shipment(order)
         if rate.get('success'):
             res['status'] = True
-            res['new_amount_delivery'] = rate['price']
+            res['new_amount_delivery'] = Monetary.value_to_html(rate['price'], {'display_currency': order.currency_id})
+            res['is_free_delivery'] = not bool(rate['price'])
             res['error_message'] = rate['warning_message']
         else:
             res['status'] = False
-            res['new_amount_delivery'] = 0.0
+            res['new_amount_delivery'] = Monetary.value_to_html(0.0, {'display_currency': order.currency_id})
             res['error_message'] = rate['error_message']
         return res
 
@@ -80,22 +82,19 @@ class WebsiteSaleDelivery(WebsiteSale):
         return values
 
     def _update_website_sale_delivery_return(self, order, **post):
+        Monetary = request.env['ir.qweb.field.monetary']
         carrier_id = int(post['carrier_id'])
         currency = order.currency_id
         delivery_price = order.order_line.filtered(lambda line: line.is_delivery).price_unit
         if order:
-            return {'status': order.delivery_rating_success,
-                    'error_message': order.delivery_message,
-                    'carrier_id': carrier_id,
-                    'new_amount_delivery': self._format_amount(delivery_price, currency),
-                    'new_amount_untaxed': self._format_amount(order.amount_untaxed, currency),
-                    'new_amount_tax': self._format_amount(order.amount_tax, currency),
-                    'new_amount_total': self._format_amount(order.amount_total, currency),
+            return {
+                'status': order.delivery_rating_success,
+                'error_message': order.delivery_message,
+                'carrier_id': carrier_id,
+                'is_free_delivery': not bool(delivery_price),
+                'new_amount_delivery': Monetary.value_to_html(delivery_price, {'display_currency': currency}),
+                'new_amount_untaxed': Monetary.value_to_html(order.amount_untaxed, {'display_currency': currency}),
+                'new_amount_tax': Monetary.value_to_html(order.amount_tax, {'display_currency': currency}),
+                'new_amount_total': Monetary.value_to_html(order.amount_total, {'display_currency': currency}),
             }
         return {}
-
-    def _format_amount(self, amount, currency):
-        fmt = "%.{0}f".format(currency.decimal_places)
-        lang = request.env['res.lang']._lang_get(request.env.context.get('lang') or 'en_US')
-        return lang.format(fmt, currency.round(amount), grouping=True, monetary=True)\
-            .replace(r' ', u'\N{NO-BREAK SPACE}').replace(r'-', u'-\N{ZERO WIDTH NO-BREAK SPACE}')
\ No newline at end of file
diff --git a/addons/website_sale_delivery/static/src/js/website_sale_delivery.js b/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
index f2d775362ee..4210f3e5d85 100644
--- a/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
+++ b/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
@@ -51,8 +51,7 @@ publicWidget.registry.websiteSaleDelivery = publicWidget.Widget.extend({
      * @param {jQuery} $carrierInput
      */
     _showLoading: function ($carrierInput) {
-        $carrierInput.siblings('.o_wsale_delivery_badge_price').addClass('d-none');
-        $carrierInput.siblings('.o_delivery_compute').removeClass('d-none').html('<span class="fa fa-spinner fa-spin"/>');
+        $carrierInput.siblings('.o_wsale_delivery_badge_price').html('<span class="fa fa-spinner fa-spin"/>');
     },
     /**
      * @private
@@ -60,24 +59,24 @@ publicWidget.registry.websiteSaleDelivery = publicWidget.Widget.extend({
      */
     _handleCarrierUpdateResult: function (result) {
         this._handleCarrierUpdateResultBadge(result);
-        var $payButton = $('#o_payment_form_pay');
-        var $amountDelivery = $('#order_delivery span.oe_currency_value');
-        var $amountUntaxed = $('#order_total_untaxed span.oe_currency_value');
-        var $amountTax = $('#order_total_taxes span.oe_currency_value');
-        var $amountTotal = $('#order_total span.oe_currency_value');
+        var $payButton = $('#o_payment_form_pay .monetary_field');
+        var $amountDelivery = $('#order_delivery .monetary_field');
+        var $amountUntaxed = $('#order_total_untaxed .monetary_field');
+        var $amountTax = $('#order_total_taxes .monetary_field');
+        var $amountTotal = $('#order_total .monetary_field');
 
         if (result.status === true) {
-            $amountDelivery.text(result.new_amount_delivery);
-            $amountUntaxed.text(result.new_amount_untaxed);
-            $amountTax.text(result.new_amount_tax);
-            $amountTotal.text(result.new_amount_total);
+            $amountDelivery.html(result.new_amount_delivery);
+            $amountUntaxed.html(result.new_amount_untaxed);
+            $amountTax.html(result.new_amount_tax);
+            $amountTotal.html(result.new_amount_total);
             $payButton.data('disabled_reasons').carrier_selection = false;
             $payButton.prop('disabled', _.contains($payButton.data('disabled_reasons'), true));
         } else {
-            $amountDelivery.text(result.new_amount_delivery);
-            $amountUntaxed.text(result.new_amount_untaxed);
-            $amountTax.text(result.new_amount_tax);
-            $amountTotal.text(result.new_amount_total);
+            $amountDelivery.html(result.new_amount_delivery);
+            $amountUntaxed.html(result.new_amount_untaxed);
+            $amountTax.html(result.new_amount_tax);
+            $amountTotal.html(result.new_amount_total);
         }
     },
     /**
@@ -85,23 +84,19 @@ publicWidget.registry.websiteSaleDelivery = publicWidget.Widget.extend({
      * @param {Object} result
      */
     _handleCarrierUpdateResultBadge: function (result) {
-        var $carrierBadge = $('#delivery_carrier input[name="delivery_type"][value=' + result.carrier_id + '] ~ .badge.d-none');
-        var $computeBadge = $('#delivery_carrier input[name="delivery_type"][value=' + result.carrier_id + '] ~ .o_delivery_compute');
+        var $carrierBadge = $('#delivery_carrier input[name="delivery_type"][value=' + result.carrier_id + '] ~ .o_wsale_delivery_badge_price');
 
         if (result.status === true) {
              // if free delivery (`free_over` field), show 'Free', not '$0'
-             if (parseInt(result.new_amount_delivery)) {
-                 $carrierBadge.children('span').text(result.new_amount_delivery);
-             } else {
+             if (result.is_free_delivery) {
                  $carrierBadge.text(_t('Free'));
+             } else {
+                 $carrierBadge.html(result.new_amount_delivery);
              }
-             $carrierBadge.children('span').text(result.new_amount_delivery);
-             $carrierBadge.removeClass('d-none');
-             $computeBadge.addClass('d-none');
-             $computeBadge.removeClass('o_wsale_delivery_carrier_error');
+             $carrierBadge.removeClass('o_wsale_delivery_carrier_error');
         } else {
-            $computeBadge.addClass('o_wsale_delivery_carrier_error');
-            $computeBadge.text(result.error_message);
+            $carrierBadge.addClass('o_wsale_delivery_carrier_error');
+            $carrierBadge.text(result.error_message);
         }
     },
 
diff --git a/addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss b/addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss
index fdeef693e55..c0a0cb4a2f4 100644
--- a/addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss
+++ b/addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss
@@ -1,5 +1,5 @@
 @include media-breakpoint-down(sm) {
-    .o_delivery_compute {
+    .o_wsale_delivery_badge_price {
         max-width: 130px;
         text-overflow: ellipsis;
         overflow: hidden;
diff --git a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
index 0f802fe7d80..d0c692177ba 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -6,7 +6,7 @@
             <tr id="order_delivery" t-if="website_sale_order and website_sale_order.carrier_id">
               <td class="text-right noborder text-muted"  title="Delivery will be updated after choosing a new delivery method">Delivery:</td>
               <td class="text-xl-right noborder text-muted" >
-                   <span t-field="website_sale_order.amount_delivery" style="white-space: nowrap;" t-options='{
+                   <span t-field="website_sale_order.amount_delivery" class="monetary_field" style="white-space: nowrap;" t-options='{
                       "widget": "monetary",
                       "display_currency": website_sale_order.currency_id,
                   }'/>
@@ -31,8 +31,7 @@
             <span t-else="" t-att-class="badge_class">Free</span>
         </t>
         <t t-else="">
-            <span t-attf-class="#{badge_class} o_wsale_delivery_badge_price d-none" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
-            <span t-attf-class="#{badge_class} o_delivery_compute">Select to compute delivery rate</span>
+            <span t-attf-class="#{badge_class} o_wsale_delivery_badge_price">Select to compute delivery rate</span>
         </t>
         <t t-if="delivery.website_description">
             <div t-field="delivery.website_description" class="text-muted mt8"/>