Change "elementTmpl" zip code field element in billing checkout Magento 2

Question

How I can change "elementTmpl" for zip code field element in billing checkout Magento 2.

I have already been able to change the shipping by xml but I can not change the billing

Answer 1

Billing and shipping forms are generated dynamically. so we need to create a plugin for the \Magento\Checkout\Block\Checkout\LayoutProcessor::process method. so for create the plugin first we should make an entry in di.xml on this path.

app/code/CompanyName/Module/etc/frontend/di.xml

<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="add_custom_field_checkout_form" type="CompanyName\Module\Model\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

Create plugin class on this Directory.

app/code/CompanyName/Module/Model/Plugin/Checkout/LayoutProcessor.php

namespace NameSpace\CompanyName\Module\Plugin\Checkout;
class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {
$jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['postcode']['config']['elementTmpl'] = 'ui/form/element/input';

return $jsLayout;
    }
}

So you can change not only the elementTmpl ,much more things.

Answer 2

Billing address render from the block file so you can create plugin for the LayoutProcessor.php and add elementTmpl there.

Here is the class path => Link