How to make html tags in the shipping method title in Magento 2

Question

I'd like to be able to use some simple html tags to format the Shipping Method Title. If I include tags in the Shipping Method Title currently via the admin panel, it displays the tag on the front end and doesn't behavior it as html.

kindly guide me , how to achieve this behavior.

Thanks in Advance

Answer 1

You need to do below changes to achieve your requirement.

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/shipping-method-item.html

To override it you need to create the same file in your theme:

app/design/frontend/PACKAGE-NAME/THEME-NAME/Magento_Checkout/web/template/shipping-address/shipping-method-item.html

After you have to change the "text" attribute into an "html" for the method title:

Before:

<td class="col col-method"
        attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"
        text="method.method_title" />
<td class="col col-carrier"
        attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
        text="method.carrier_title" />

After:

<td class="col col-method"
    attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"
    html="method.method_title" />
<td class="col col-carrier"
    attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
    html="method.carrier_title" />

Final Code:

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<tr class="row"
    click="element.selectShippingMethod">
    <td class="col col-method">
        <input type="radio"
               class="radio"
               ifnot="method.error_message"
               ko-checked="element.isSelected"
               ko-value="method.carrier_code + '_' + method.method_code"
               attr="'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code,
                    'checked': element.rates().length == 1 || element.isSelected" />
    </td>
    <td class="col col-price">
        <each args="element.getRegion('price')" render="" />
    </td>
    <td class="col col-method"
        attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"
        html="method.method_title" />
    <td class="col col-carrier"
        attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
        html="method.carrier_title" />
</tr>
<tr class="row row-error"
    if="method.error_message">
    <td class="col col-error" colspan="4">
        <div role="alert" class="message error">
            <div text="method.error_message"></div>
        </div>
        <span class="no-display">
            <input type="radio"
                   attr="'value' : method.method_code, 'id': 's_method_' + method.method_code" />
        </span>
    </td>
</tr>

Finally you will be able to add html tags to the shipping method title via admin panel without issues on the checkout page.

Admin :- https://prnt.sc/19nt7v8 Output :- https://prnt.sc/19ntapz

Please check.

Cheers!