0

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

1 Answer 1

2

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!

1
  • it is not working in 2.4.4
    – Vipin Garg
    Jun 20 at 16:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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