I set up a Cart Price Rule that gives 30% discount. The 30% discount is given to the order, however, it displays "Discount" instead of the Default Rule Label specified.

Cart Price Rule Setup

The following is details to the Rule I added: enter image description here enter image description here enter image description here enter image description here


Even though the labels were set, it shows Discount in the front end enter image description here


With more research I saw that the variable "Discount" is passed to the Knockout JS discount.html template instead of the Discount Description.


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.cart.totals">
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="block-totals" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="before_grandtotal" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="discount" xsi:type="array">
                                            <item name="component"  xsi:type="string">Magento_SalesRule/js/view/cart/totals/discount</item>
                                            <item name="config" xsi:type="array">
                                                <item name="title" xsi:type="string" translate="true">Discount</item>

1 Answer 1




to your theme






Change contents of discount.html to:

<!-- ko if: isDisplayed() -->
<tr class="totals">
    <th colspan="1" style="" class="mark" scope="row">
        <span class="title" data-bind="text: getDiscountLabel()"></span>
        <span class="discount coupon" data-bind="text: getCouponLabel()"></span>
    <td class="amount" data-bind="attr: {'data-th': title}">
        <span><span class="price" data-bind="text: getValue()"></span></span>
<!-- /ko -->

Add this function to discount.js (for example, put it below the getCouponLabel function):

getDiscountLabel: function () {
    if (!this.totals()) {
        return null;

    return this.totals()['total_segments'][2]['title'];

Clear static files and cache.

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