Magento 2: Hide First Name and Last Name field on checkout page

Question

How to hide First Name and Last Name fields on checkout page. I only want to hide the fields and not disable them as I am filling those fields via custom js from a different field. I am not able to find those fields on checkout_index_index.xml

I tried using LayoutProcessor but not working:

    class LayoutProcessor{

        public function afterProcess(
                            \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
                            array  $jsLayout
                        )
        {
            $shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
            ['shippingAddress']['children']['shipping-address-fieldset']['children']['firstname']['visible'] = 0;

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
            ['shippingAddress']['children']['shipping-address-fieldset']['children']['lastname']['visible'] = 0;
            
            $shippingConfiguration = $this->setFullName($shippingConfiguration);

            return $jsLayout;
        }

        /**
        * Set "Full Name"
        * @param array $shippingConfiguration
        * @return array
        */
        private function setFullName(array  $shippingConfiguration){

                $shippingConfiguration['full_name'] = [
                    'component' => 'MonotaroIndonesia_CheckoutFullName/js/checkout/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input',
                        'options' => [],
                        'id' => 'full-name'
                    ],
                    'dataScope' => 'shippingAddress.full_name',
                    'label' => __('Full Name'),
                    'provider' => 'checkoutProvider',
                    'visible' => true,
                    'validation' => [
                        'required-entry' => true
                    ],
                    'sortOrder' => 0,
                    'id' => 'full-name',
                ];
                $shippingConfiguration = $this->makeTrackableFirstLastName($shippingConfiguration);
                return $shippingConfiguration;
        }

        private function makeTrackableFirstLastName(array  $shippingConfiguration){
                $shippingConfiguration['firstname']['tracks']['value'] = true;
                $shippingConfiguration['lastname']['tracks']['value'] = true;

                return $shippingConfiguration;
        }
}

Abstract JS:

    define([
'Magento_Ui/js/form/element/abstract',
'mage/translate'
], function (AbstractField, $t) {
'use strict';

return AbstractField.extend({
    defaults: {
        modules: {
            firstname: '${ $.parentName }.firstname',
            lastname: '${ $.parentName }.lastname',
        }
    },

hasChanged: function () {
    this._super();
    this.setFirstLastNameFromFullName();
},

/**
 * Extract the 'First' and 'Last' Name from the 'Full Name'
 */
setFirstLastNameFromFullName : function(){

    var fullValue = this.value().trim();
    var firstSpacePos = fullValue.indexOf(' ');
    if(firstSpacePos!=-1){
      //this means user has entered a space
      var first_name = fullValue.substring(0, firstSpacePos).trim();
      var last_name = fullValue.substring(firstSpacePos).trim();
      this.firstname().value(first_name);
      this.lastname().value(last_name);
    }
    else{
      //this means user has entered a single word
      this.firstname().value(fullValue);
      this.lastname().value(fullValue);
    }
    console.log('firstname: '+this.firstname().value());
    console.log('lastname: '+this.lastname().value());
},


});
});

Answer 1

Go to below file where you can find class field-name-firstname and field-name-lastname comment code.

vendor\magento\module-customer\view\frontend\templates\widget\name.phtml

After you override your theme.

And second way is hide using css.

THANKS.

Answer 2

app/code/VendorName/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="VendorName_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout" />
        </sequence>
    </module>
</config>

app/code/VendorName/ModuleName/etc/frontend/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\Block\Checkout\LayoutProcessor">
        <plugin name="vendorname_checkout_layout_processor" type="VendorName\ModuleName\Plugin\Magento\Checkout\Block\Checkout\LayoutProcessor" sortOrder="10"/>
    </type>
</config>

app/code/VendorModule/ModuleName/Magento/Checkout/Block/Checkout/LayoutProcessor.php

<?php
namespace VendorName\ModuleName\Plugin\Magento\Checkout\Block\Checkout;

class LayoutProcessor
{
    /**
     * Process js Layout of block
     *
     * @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']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['firstname']['visible'] = 0;

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['lastname']['visible'] = 0;

        return $jsLayout;
    }
}