On the checkout page, generally requirement comes in to hide firstname and lastname. In this article, I am exactly explaining these steps. Follow these step to get the exact output.
Step 1: Declaration of Module
It is necessary to create etc folder and add the module.xml file in it
app/code/Thecoachsmb/Checkout/etc/module.xml
Contents would be:
<?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="Thecoachsmb_Checkout" />
</module>
</config>Step 2: Registration of Module
To register the module, create a registration.php file in the app/code/Thecoachsmb/Checkout/registration.php
Contents would be:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Thecoachsmb_Checkout',
__DIR__
);
Step 3: Create Plugin
To register the module, create a registration.php file in the app/code/Thecoachsmb/Checkout/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="thecoachsmb_checkout_layout_processor" type="Thecoachsmb\Checkout\Plugin\Block\Checkout\LayoutProcessorPlugin" sortOrder="10"/>
</type>
</config>Step 4: Hide FirstName and LastName
To register the module, create a registration.php file in the app/code/Thecoachsmb/Checkout/Plugin/Block/Checkout/LayoutProcessorPlugin.php
Content would be:-
<?php
namespace Thecoachsmb\Checkout\Plugin\Block\Checkout;
class LayoutProcessorPlugin
{
/**
* 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
) {
// Hide FirstName
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['firstname']['visible'] = false;
// Hide LastName
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['lastname']['visible'] = false;
// Hide company
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['company']['visible'] = false;
return $jsLayout;
}
}Step 5: Deploy the Changes
Run the below command:
php bin/magento se:up && php bin/magento se:s:d -f && php bin/magento c:f
Conclusion
In this article, we have discussed about the steps to hide element from the checkout page. In this way, you can hide any other element also.
Thanks. Do comment giving your feedback.