Magento 2 – Fix Shipping Method Prices Not Showing in Checkout

checkoutknockoutjsmagento2moduletemplate

I would like to add a new Checkout step to the Checkout page but would like to place it between the customer's shipping details (name, address, email) and the shipping methods radio buttons. To do this, I have removed the Shipping Methods radio buttons (li#opc-shipping_method) from shipping.htmland placed it in a custom module. Apart from removing the shipping methods, I haven't touched the shipping.html file.

#Magento_Checkout/web/template/shipping.html

<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
<div class="step-title" data-bind="i18n: 'Shipping Address'" data-role="title"></div>
<div id="checkout-step-shipping"
     class="step-content"
     data-role="content">

    <!-- ko if: (!quoteIsVirtual) -->
        <!-- ko foreach: getRegion('customer-email') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    <!--/ko-->

    <!-- ko foreach: getRegion('address-list') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <!-- ko foreach: getRegion('address-list-additional-addresses') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <!-- Address form pop up -->
    <!-- ko if: (!isFormInline) -->
    <button type="button"
            data-bind="click: showFormPopUp, visible: !isNewAddressAdded()"
            class="action action-show-popup">
        <span data-bind="i18n: 'New Address'"></span></button>
    <div id="opc-new-shipping-address" data-bind="visible: isFormPopUpVisible()">
        <!-- ko template: 'Magento_Checkout/shipping-address/form' --><!-- /ko -->
    </div>
    <!-- /ko -->

    <!-- ko foreach: getRegion('before-form') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <!-- Inline address form -->
    <!-- ko if: (isFormInline) -->
    <!-- ko template: 'Magento_Checkout/shipping-address/form' --><!-- /ko -->
    <!-- /ko -->
</div>

Before adding my new step between the shipping details and the shipping methods, I enabled the new module containing the shipping methods to make sure all was okay. The shipping methods show on the checkout as exepcted, but the prices aren't being displayed!

My new module is made up of the following:

#Mike/Checkout/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="Mike_Checkout" setup_version="1.0.0"/>
</config>

#Mike/Checkout/view/frontend/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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-methods" xsi:type="array">
                                            <item name="component" xsi:type="string">Mike_Checkout/js/view/shipping-methods</item>
                                            <item name="sortOrder" xsi:type="string">1</item>
                                            <item name="children" xsi:type="array"></item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
    </referenceBlock>
</body>

#Mike/Checkout/view/frontend/web/js/view/shipping-methods.js
(This is pretty much just a copy of Magento_Checkout/view/web/js/view/shipping.js to make sure I have all of methods I need)
define(
[
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/shipping-rates-validator',
    'Magento_Checkout/js/model/shipping-address/form-popup-state',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/checkout-data',
    'uiRegistry',
    'mage/translate',
    'Magento_Checkout/js/model/shipping-rate-service'
],
function (
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    shippingRatesValidator,
    formPopUpState,
    shippingService,
    selectShippingMethodAction,
    rateRegistry,
    setShippingInformationAction,
    stepNavigator,
    modal,
    checkoutDataResolver,
    checkoutData,
    registry,
    $t
) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Mike_Checkout/shipping-methods'
        },

        //add here your logic to display step,
        isVisible: ko.observable(true),
        visible: ko.observable(!quote.isVirtual()),
        errorValidationMessage: ko.observable(false),
        isFormInline: addressList().length == 0,

        /**
        *
        * @returns {*}
        */
        initialize: function () {
            this._super();

            stepNavigator.registerStep(
                //step code will be used as step content id in the component template
                'shipping_methods',
                //step alias
                null,
                //step title value
                'Shipping Methods',
                //observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                17
            );


            return this;
        },

        /**
        * The navigate() method is responsible for navigation between checkout step
        * during checkout. You can add custom logic, for example some conditions
        * for switching to your custom step 
        */
        navigate: function () {

        },

        /**
        * @returns void
        */
        navigateToNextStep: function () {
            stepNavigator.next();
        },


        rates: shippingService.getShippingRates(),
        isLoading: shippingService.isLoading,

        /**
         * Set shipping information handler
         */
        setShippingInformation: function () {
            if (this.validateShippingInformation()) {
                setShippingInformationAction().done(
                    function () {
                        stepNavigator.next();
                    }
                );
            }
        },

        /**
         * @return {Boolean}
         */
        validateShippingInformation: function () {
            var shippingAddress,
                addressData,
                loginFormSelector = 'form[data-role=email-with-possible-login]',
                emailValidationResult = customer.isLoggedIn();

            if (!quote.shippingMethod()) {
                this.errorValidationMessage('Please specify a shipping method.');

                return false;
            }

            if (!customer.isLoggedIn()) {
                $(loginFormSelector).validation();
                emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
            }

            if (this.isFormInline) {

                this.source.set('params.invalid', false);
                this.source.trigger('shippingAddress.data.validate');

                if (this.source.get('shippingAddress.custom_attributes')) {
                    this.source.trigger('shippingAddress.custom_attributes.data.validate');
                }

                if (this.source.get('params.invalid') ||
                    !quote.shippingMethod().method_code ||
                    !quote.shippingMethod().carrier_code ||
                    !emailValidationResult
                ) {
                    return false;
                }

                shippingAddress = quote.shippingAddress();
                addressData = addressConverter.formAddressDataToQuoteAddress(
                    this.source.get('shippingAddress')
                );

                //Copy form data to quote shipping address object
                for (var field in addressData) {

                    if (addressData.hasOwnProperty(field) &&
                        shippingAddress.hasOwnProperty(field) &&
                        typeof addressData[field] != 'function' &&
                        _.isEqual(shippingAddress[field], addressData[field])
                    ) {
                        shippingAddress[field] = addressData[field];
                    } else if (typeof addressData[field] != 'function' &&
                        !_.isEqual(shippingAddress[field], addressData[field])) {
                        shippingAddress = addressData;
                        break;
                    }
                }

                if (customer.isLoggedIn()) {
                    shippingAddress.save_in_address_book = 1;
                }
                selectShippingAddress(shippingAddress);
            }

            if (!emailValidationResult) {
                $(loginFormSelector + ' input[name=username]').focus();

                return false;
            }

            return true;
        }


    });
}
);

#Mike/Checkout/view/frontend/web/template/shipping-methods.html

<li id="opc-shipping_method"
class="checkout-shipping-method"
data-bind="fadeVisible: visible(), blockLoader: isLoading"
role="presentation">
<div class="checkout-shipping-method">
    <div class="step-title" data-bind="i18n: 'Shipping Methods'" data-role="title"></div>
    <!-- ko foreach: getRegion('before-shipping-method-form') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
    <div id="checkout-step-shipping_method"
         class="step-content"
         data-role="content"
         role="tabpanel"
         aria-hidden="false">
        <!-- ko if: rates().length  -->
        <form class="form methods-shipping" id="co-shipping-method-form" data-bind="submit: setShippingInformation" novalidate="novalidate">
            <div id="checkout-shipping-method-load">
                <table class="table-checkout-shipping-method">
                    <thead>
                        <tr class="row">
                            <th class="col col-method" data-bind="i18n: 'Select Method'"></th>
                            <th class="col col-price" data-bind="i18n: 'Price'"></th>
                            <th class="col col-method" data-bind="i18n: 'Method Title'"></th>
                            <th class="col col-carrier" data-bind="i18n: 'Carrier Title'"></th>
                        </tr>
                    </thead>
                    <tbody>

                    <!--ko foreach: { data: rates(), as: 'method'}-->
                    <tr class="row" data-bind="click: $parent.selectShippingMethod">
                        <td class="col col-method">
                            <!-- ko ifnot: method.error_message -->
                            <!-- ko if: $parent.rates().length == 1 -->
                            <input class="radio"
                                   type="radio"
                                   data-bind="attr: {
                                                checked: $parent.rates().length == 1,
                                                'value' : method.carrier_code + '_' + method.method_code,
                                                'id': 's_method_' + method.method_code,
                                                'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code
                                             }" />
                            <!-- /ko -->
                            <!--ko ifnot: ($parent.rates().length == 1)-->
                            <input type="radio"
                                   data-bind="
                                            value: method.carrier_code + '_' + method.method_code,
                                            checked: $parent.isSelected,
                                            attr: {
                                                'id': 's_method_' + method.carrier_code + '_' + method.method_code,
                                                'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code
                                            },
                                            click: $parent.selectShippingMethod"
                                   class="radio"/>
                            <!--/ko-->
                            <!-- /ko -->
                        </td>
                        <td class="col col-price">
                            <!-- ko foreach: $parent.getRegion('price') -->
                            <!-- ko template: getTemplate() --><!-- /ko -->
                            <!-- /ko -->
                        </td>

                        <td class="col col-method"
                                data-bind="text: method.method_title, attr: {'id': 'label_method_' + method.method_code + '_' + method.carrier_code}"></td>

                        <td class="col col-carrier"
                                data-bind="text: method.carrier_title, attr: {'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code}"></td>
                    </tr>

                    <!-- ko if:  method.error_message -->
                    <tr class="row row-error">
                        <td class="col col-error" colspan="4">
                            <div class="message error">
                                <div data-bind="text: method.error_message"></div>
                            </div>
                            <span class="no-display">
                                <input type="radio" data-bind="attr: {'value' : method.method_code, 'id': 's_method_' + method.method_code}"/>
                            </span>
                        </td>
                    </tr>
                    <!-- /ko -->

                    <!-- /ko -->
                    </tbody>
                </table>
            </div>

            <div id="onepage-checkout-shipping-method-additional-load">
                <!-- ko foreach: getRegion('shippingAdditional') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
                <!-- /ko -->
            </div>
            <!-- ko if: errorValidationMessage().length > 0 -->
            <div class="message notice">
                <span><!-- ko text: errorValidationMessage()--><!-- /ko --></span>
            </div>
            <!-- /ko -->
            <div class="actions-toolbar" id="shipping-method-buttons-container">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
        <!-- /ko -->
        <!-- ko ifnot: rates().length > 0 --><div class="no-quotes-block"><!-- ko i18n: 'Sorry, no quotes are available for this order at this time'--><!-- /ko --></div><!-- /ko -->
    </div>
</div>
</li>

I have worked out that the template: $parent.getRegion('price') isn't being pulled in, in new shipping-methods.html file.

<td class="col col-price">
    <!-- ko foreach: $parent.getRegion('price') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
</td>

I'm guessing my module isn't able to access the templates it needs to generate the prices?

Update:
I've noticed that isDisplayShippingPriceExclTax is set to false in the window.checkoutConfig, though, this is true on the M2 demo site checkout. Any relation?

Also, from further research, it looks like the shipping method prices are generated via the Magento_Tax/template/checkout/shipping_method/price.html template. Why is this not available to my new module?

To summarise:
The shipping method prices aren't showing in my new module.

Best Answer

I got it working! I needed to included the Magento_Tax/js/view/checkout/shipping_method/price component (and display area) as a child of my new step module in my checkout_index_index.xml:

#app/code/Mike/Checkout/view/frontend/layout/checkout_index_index.xml

<item name="shipping-methods" xsi:type="array">
<item name="component" xsi:type="string">Mike_Checkout/js/view/shipping-methods</item>
<item name="sortOrder" xsi:type="string">1</item>
<item name="children" xsi:type="array">
    <item name="price" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Tax/js/view/checkout/shipping_method/price</item>
        <item name="displayArea" xsi:type="string">price</item>
    </item>
</item>

Related Solutions

Magento – Magento 2 checkout – add a custom field between shipping address and shipping method

Based on your question I'm under the assumption you already have your extension attributes set up. I have carried out a similar modification and hopefully my answer helps.

In your Custom module create a requirejs-config file to extend the default shipping processor/default

Namespace/CustomModule/view/frontend/requirejs-config.js
var config = {
    "map": {
        "*": {
            'Magento_Checkout/js/model/shipping-save-processor/default': 'Namespace_CustomModule/js/model/shipping-save-processor/default'
        }
    }
};

Add your extension attribute to the payload.

/*global define,alert*/
define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/resource-url-manager',
        'mage/storage',
        'Magento_Checkout/js/model/payment-service',
        'Magento_Checkout/js/model/payment/method-converter',
        'Magento_Checkout/js/model/error-processor',
        'Magento_Checkout/js/model/full-screen-loader',
        'Magento_Checkout/js/action/select-billing-address'
    ],
    function (
        $,
        ko,
        quote,
        resourceUrlManager,
        storage,
        paymentService,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction
    ) {
        'use strict';

        return {
            saveShippingInformation: function () {
                var payload;

                if (!quote.billingAddress()) {
                    selectBillingAddressAction(quote.shippingAddress());
                }
                //Adding the extension attributes to your shipping address
                payload = {
                    addressInformation: {
                        shipping_address: quote.shippingAddress(),
                        billing_address: quote.billingAddress(),
                        shipping_method_code: quote.shippingMethod().method_code,
                        shipping_carrier_code: quote.shippingMethod().carrier_code,
                        extension_attributes:{
                            custom_field: $('#custom_field').val(), 
                        }
                    }
                };

                fullScreenLoader.startLoader();

                return storage.post(
                    resourceUrlManager.getUrlForSetShippingInformation(quote),
                    JSON.stringify(payload)
                ).done(
                    function (response) {
                        quote.setTotals(response.totals);
                        paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                        fullScreenLoader.stopLoader();
                    }
                ).fail(
                    function (response) {
                        errorProcessor.process(response);
                        fullScreenLoader.stopLoader();
                    }
                );
            }
        };
    }
);

Save the Attribute to your Quote with a plugin (Not sure if you could use an observer here I have not checked).

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\Checkout\Model\ShippingInformationManagement">
        <plugin name="Namespace_CustomModule_save_delivery_date_in_quote" type="Namespace\CustomModule\Plugin\Checkout\SaveAddressInformation" />
    </type>

</config>

SaveAddressInformation.php

class SaveAddressInformation
{
    protected $quoteRepository;
    public function __construct(
        \Magento\Quote\Model\QuoteRepository $quoteRepository
    ) {
        $this->quoteRepository = $quoteRepository;
    }
    /**
     * @param \Magento\Checkout\Model\ShippingInformationManagement $subject
     * @param $cartId
     * @param \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
     */
    public function beforeSaveAddressInformation(
        \Magento\Checkout\Model\ShippingInformationManagement $subject,
        $cartId,
        \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
    ) {
        $extensionAttributes = $addressInformation->getExtensionAttributes();
        $customField = $extensionAttributes->getCustomField();
        $quote = $this->quoteRepository->getActive($cartId);
        $quote->setCustomField($customField);

    }
}

Save the Attribute to your order with an Observer events.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="sales_model_service_quote_submit_before">
        <observer name="unique_observer_name" instance="Namespace\CustomModule\Observer\SaveCustomFieldToOrder"/>
    </event>
</config>

SaveCustomFieldToOrder.php

class SaveCustomFieldToOrder implements ObserverInterface
{
    /**
     * @var \Magento\Framework\ObjectManagerInterface
     */
    protected $_objectManager;

    /**
     * @param \Magento\Framework\ObjectManagerInterface $objectmanager
     */
    public function __construct(\Magento\Framework\ObjectManagerInterface $objectmanager)
    {
        $this->_objectManager = $objectmanager;
    }

    public function execute(EventObserver $observer)
    {
        $order = $observer->getOrder();
        $quoteRepository = $this->_objectManager->create('Magento\Quote\Model\QuoteRepository');
        /** @var \Magento\Quote\Model\Quote $quote */
        $quote = $quoteRepository->get($order->getQuoteId());
        $order->setCustomField( $quote->getCustomField() );

        return $this;
    }
}

Magento2 – How to Wrap Multiple Elements in a Class in Checkout Form

Very interesting question. Let me answer the last assumption about the Checkout implementation. It might be over-engineered a bit since you have to add more than just 1 change in 1 file.

The approach does not require performing modifications in the Magento 2 core modules.

In order to achieve your goal and wrap checkout shipping address fields into a custom element the following elements should be added:

Custom checkout_index_index.xml file with the new UI Component definition
New HTML template with custom element
Layout Processor plugin
The di.xml declaration for the new plugin

The Custom_Checkout\view\frontend\layout\checkout_index_index.xml file:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="custom-field-group" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="sortOrder" xsi:type="string">0</item>
                                                                <item name="template" xsi:type="string">Custom_Checkout/checkout/field-group</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="field-group" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">field-group</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

In the layout, we should add new custom-field-group UI Component. The component has its own template Custom_Checkout\view\web\template\checkout\field-group.html where all fields are rendered. Also, the custom-field-group component has "0" value for sortOrder node. It allows rendering the component before all fields declared as part of the shipping-address-fieldset component.

Also, there is a field-group UI Component with its own displayArea setting.

The Custom_Checkout\view\web\template\checkout\field-group.html template file:

<div class="custom">
<!-- ko foreach: getRegion('field-group') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>

The template allows rendering all components added into the field-group region (also known as displayArea).

The Custom\Checkout\Plugin\AddressLayoutProcessor class file:

namespace Custom\Checkout\Plugin;

use Magento\Checkout\Block\Checkout\LayoutProcessor;

/**
 * Class AddressLayoutProcessor
 */
class AddressLayoutProcessor
{
    /**
     * @param LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(LayoutProcessor $subject, array $jsLayout)
    {
        $fieldGroup = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']
            ['children']['custom-field-group']['children']['field-group']['children'];

        $shippingAddressFields = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

        $fieldGroup['country_id'] = $shippingAddressFields['country_id'];
        $fieldGroup['postcode'] = $shippingAddressFields['postcode'];

        $shippingAddressFields['country_id']['visible'] = false;
        $shippingAddressFields['postcode']['visible'] = false;

        return $jsLayout;
    }
}

The class is responsible for copying both country_id and postcode fields configurations into the newly created custom-field-group component.

The fields, once assigned to the custom-field-group should be marked as hidden (visible = true) in order to avoid duplication during rendering. The componentDisabled should not be used for disabling country_id and postcode due to other dependencies (e.g. region.js file) and shipping address processing mechanism.

The Custom\Checkout\etc\frontend\di.xml file:

<?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\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="customFieldGroupPlugin" type="Custom\Checkout\Plugin\AddressLayoutProcessor"/>
    </type>
</config>

The plugin approach used for the fields changes because fields should be copied with complete configuration. In case Layout Processor declared in a custom module the plugin will catch changes.

As a result, both the country_id and the postcode fields are rendered in the shipping address form and wrapped into the custom element as it below (I added few styles for the custom CSS class to make stand out in the form):

If you also would like to do modifications to a billing address form, the Custom\Checkout\Plugin\AddressLayoutProcessor class should be updated. All you have to do is to perform same manipulations with billing address for specific payment method as we have for shipping address fields.

Happy to help!

Best Answer

Related Solutions

Magento – Magento 2 checkout – add a custom field between shipping address and shipping method

Magento2 – How to Wrap Multiple Elements in a Class in Checkout Form

Related Topic