Shipping Methods – How to Add Text Below on Checkout in Magento 2

magento-2.1magento2shipping

I want to add some shipping policy of company below shipping methods on checkout.
Below is image attached which i want to achieve.

I am beginner to magento2. Kindly guide me how can i achieve this.
Thanks

Best Answer

Rather than any customization you can use OOTB feature of Magento, for that you just need to change your store configurations

Store > Configuration > Sales > Shipping Settings > Shipping Policy Parameters

On frontend It looks like this,

1. Declare module's checkout dependency

app/code/NameSpace/ModuleName/etc/module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="NameSpace_ModuleName" setup_version="0.0.1" active="true">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

2. Overwrite checkout layout

app/code/NameSpace/ModuleName/view/frontend/layout/checkout_index_index.xml

<?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="children" xsi:type="array">
                                                        <item name="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="additional_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">NameSpace_ModuleName/js/view/checkout/shipping/additional-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

3. Create JavaScript UI Component

Magento 2 checkout is manage in JavaScript (with Knockout). So you need to create a custom JS compnent. It's will create the link between checkout UI component and your custom HTML template.

app/code/NameSpace/ModuleName/view/frontend/web/js/view/checkout/shipping/additional-block.js

define([
    'uiComponent'

], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'NameSpace_ModuleName/checkout/shipping/additional-block'
        }
    });
});

4. Create HTML template

Then create the HTML template wich going to display in checkout.

app/code/NameSpace/ModuleName/view/frontend/web/template/checkout/shipping/additional-block.html

<div class="checkout-block" id="block-custom">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>

5. Clear cache

Finally run following commands :

php bin/magento cache:clean
php bin/magento setup:upgrade
chmod -R 777 var/*

Download full example demo module from here

Magento2.1.9 Shipping Methods – How to Apply Condition in Checkout Shipping Method

Create custom module Hello_World
Create plugin and configure in di.xml file, app/code/Hello/World/di.xml

<?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> 
        <type name="Magento\OfflineShipping\Model\Carrier\Freeshipping">
          <plugin name="disable-freeshipping" type="Hello\World\Model\Carrier\Freeshipping" sortOrder="1" />  

        </type>      
 </config>

Create model file app/code/Hello/World/Model/Carrier/Freeshipping.php

<?php

namespace Hello\World\Model\Carrier;    

class Freeshipping{

protected $_checkoutSession;        

protected $_scopeConfig;

protected $_customerSession;

public function __construct(
    \Magento\Checkout\Model\Session $checkoutSession,
    \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
    \Magento\Store\Model\StoreManagerInterface $storeManager,
    \Magento\Customer\Model\Session $customerSession
) {
    $this->_storeManager = $storeManager;
    $this->_checkoutSession = $checkoutSession;
    $this->_scopeConfig = $scopeConfig;
    $this->_customerSession = $customerSession;
}

public function afterCollectRates(\Magento\OfflineShipping\Model\Carrier\Freeshipping $freeshipping, $result)
{   
    //Magento-2 Log Here
    $writer = new \Zend\Log\Writer\Stream(BP.'/var/log/magento2.log');
    $logger = new \Zend\Log\Logger();
    $logger->addWriter($writer);
    //Customer Group ID Here
    $customerGroupId=$this->_customerSession->getCustomer()->getGroupId();     
    $logger->info("Free shipping has been calling and customerGroupId ".$customerGroupId);              
    //keep your customer group id here
    if($customerGroupId === '1'){
        return false;       
    }        
    return $result;
}  

}