2

I need to hide carrier title on checkout page only when price is 0.00.

enter image description here

Or even the js file from where this carrier title is displayed will be really helpful

1

You can do it by following Steps below:

Step 1: Create new template for shipping method item
In your custom module directory, create a new file:
<your_module_dir>/view/frontend/web/template/custom-method-item-template.html.
In this file, add the following code.

It is copied from the <Magento_Checkout_module_dir>/view/frontend/web/template/shipping-address/shipping-method-item.html template, comment <td> for method title.

<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"
        text="method.method_title" /> -->
    <td class="col col-carrier"
        attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
        text="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>

Step 2: Create a new template for shipping methods list
In your custom module directory, create a new file:
<your_module_dir>/view/frontend/web/template/custom-method-list-template.html.
In this file, add the following code. It uses the code from the app/code/Magento/Checkout/view/frontend/web/template/shipping-address/shipping-method-list.html template, comment line for Method Title:

<div id="checkout-shipping-method-load">
    <table class="table-checkout-shipping-method">
        <thead>
        <tr class="row">
            <th class="col col-method" translate="'Select Method'"></th>
            <th class="col col-price" translate="'Price'"></th>
            <!--<th class="col col-method" translate="'Method Title'"></th> -->
            <th class="col col-carrier" translate="'Carrier Title'"></th>
        </tr>
        </thead>
        <tbody>
        <!-- ko foreach: { data: rates(), as: 'method'} -->
        <!--ko template: { name: element.shippingMethodItemTemplate} --><!-- /ko -->
        <!-- /ko -->
        </tbody>
    </table>
</div>

Step 3: Override shipping step configuration
In your custom module directory, create a new file: <your_module_dir>/view/frontend/layout/checkout_index_index.xml.
In this file, add the following code.

It overrides the shippingMethodListTemplate and shippingMethodItemTemplate properties of <Magento_Checkout_module_dir>/view/frontend/web/js/view/shipping.js:

<?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">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="config" xsi:type="array">
                                                        <item name="shippingMethodItemTemplate" xsi:type="string">Vendor_Checkout/custom-method-item-template</item>
                                                        <item name="shippingMethodListTemplate" xsi:type="string">Vendor_Checkout/custom-method-list-template</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Source: Customize the list of shipping methods

  • This is perfect but can i do only if the price is 0.00. In short when price is 0.00 then hide this carrier title – Arjun Jun 28 at 8:29
  • Or even if you can guide me the js from where this carrier title value is displayed – Arjun Jun 28 at 8:33
  • yeah, you can check <Magento_Checkout_module_dir>/view/frontend/web/js/view/shipping.js and <Magento_Checkout_module_dir>/view/frontend/web/js/view/shipping-information.js – fmsthird Jun 28 at 8:58
  • I have tried commenting from both this js file it is not helping. Can you just chk once & guide me on that? – Arjun Jun 28 at 9:02
  • don't really know how to tweak it as the estimation for the formatted price is a different method. I think you can make your own custom js/jquery method to implement your requirement. – fmsthird Jun 28 at 9:58
0

You can remove Method Name from the admin configuration like this.

enter image description here

And you can see the result now on the front page. The title is removed.

enter image description here

  • I need to hide only on checkout page + only when price is 0.00 – Arjun Jun 28 at 8:48

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.