I am able to add a custom shipping method and I want to add a custom template for that shipping method. I have followed this article to create a custom shipping method. Is there any way to add custom phtml file for custom shipping method?

Any help would be appreciated.

Edited :

Following is my approach. Please let me know what I'm doing wrong.


<?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.root">
                <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-custom" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="step-config" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-rates-validation before-form" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="fedex-rates-validation" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Custom_Shipping/js/view/customshipping</item>                                                                    


    function (
    ) {
        "use strict";
        console.log('zed blackbeard');
        return Component.extend({
          initialize: function () {
            console.log('inside initialize function')
          defaults: {
            template: 'Custom_Shipping/customshipping',

enter image description here

As you can see in the above screenshot, js called but the template is not rendering.

1 Answer 1

Try something like this :

create yours custom block, create your xml (path of reference route you can check in xml of shipping methods), create phtml.

Go to app\design\frontend\Themes\Yourtheme\layout\extension.xml

Create block The Block file should contain all the view logic required, it should not contain any kind of html or css. Block file are supposed to have all application view logic.

Create a file:


Contents would be:

namespace Mageplaza\HelloWorld\Block;
class Display extends \Magento\Framework\View\Element\Template
    public function __construct(\Magento\Framework\View\Element\Template\Context $context)

    public function sayHello()
        return __('Hello World');

Every block in Magento 2 must extend from Magento\Framework\View\Element\Template. In this block we will define a method sayHello() to show the word “Hello World”. We will use it in template file.

Create template file Create a template file call sayhello.phtml


Insert the following code:


 * @var \Mageplaza\HelloWorld\Block\Display $block

echo $block->sayHello();

In the layout file, we define the template by Mageplaza_HelloWorld::sayhello.phtml. It mean that Magento will find the file name sayhello.phtml in templates folder of module Mageplaza_HelloWorld. The template folder of the module is app/code/{vendor_name}/{module_name}/view/frontend/templates/

see base tutorial, how to use xml,block,controller here :


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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