BLOG . Magento

Magento 2 provides a highly flexible platform for ecommerce businesses. However, not every field in the default checkout process is necessary for all store owners. Fields such as city, telephone, and company may not be required for every type of business or could clutter the user experience. 

Magento 2 checkout is the process of removing unwanted fields from both the shipping and billing address forms. This blog post will guide you on how to remove these fields from your checkout pages.

Magento 2 Checkout by Removing Unnecessary Address Fields [An Overview]

Removing unnecessary fields from the checkout process in Magento 2 can improve the user experience by simplifying the checkout flow and reducing friction. For businesses that don’t need specific address fields like city, company, or telephone, eliminating them will streamline the form and lead to higher conversion rates. 

If you’re aiming to create a more straightforward checkout for digital goods, streamline the data collection process, and simply prefer a minimal approach, Magento 2 offers several methods to hide or remove address fields from the checkout.

Steps to Remove the fields in the shipping and billing address form

1. Create a Custom Module 

app/code/klizer/Checkout/etc/module.xml and app/code/klizer/Checkout/registration.php

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'klizer_Checkout',
   __DIR__
);

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="klizer_Checkout" setup_version="1.0.0" />
</config>

2) Create di.xml 

 app/code/klizer/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="remove_company_from_checkout"
           type="klizer\Checkout\Plugin\Checkout\LayoutProcessor"
           sortOrder="10"/>
   </type>
   <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
       <plugin name="remove_checkout_billing_address_fields"
               type="klizer\Checkout\Plugin\Checkout\BillingAddressLayoutProcessor" sortOrder="1"/>
   </type>
</config>

3) Create BillingAddressLayoutProcessor.php 

app/code/klizer/Checkout/Plugin/Checkout/BillingAddressLayoutProcessor.php

<?php


namespace klizer\Checkout\Plugin\Checkout;


use Magento\Checkout\Block\Checkout\LayoutProcessor;


class BillingAddressLayoutProcessor
{
   public function afterProcess(
       LayoutProcessor $subject,
       array $result
   )
   {
       // Access the configuration of the billing form fields
       $billingConfiguration = &$result['components']['checkout']['children']['steps']['children']['billing-step']
       ['children']['payment']['children']['payments-list']['children'];


       if (isset($billingConfiguration)) {
           // Loop through each field in the billing form
           foreach ($billingConfiguration as $key => &$billingForm) {
               // Skip fields that are not form-related
               if (!isset($billingForm['children']['form-fields']['children']['city'])) {
                   continue;
               }
               // Remove or unset the "city" field
               unset($billingForm['children']['form-fields']['children']['city']);
           }
       }
      
       // Return the modified result
       return $result;
   }
}

4) Create LayoutProcessor.php

app/code/klizer/Checkout/Plugin/Checkout/LayoutProcessor.php

<?php
namespace klizer\Checkout\Plugin\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
   ) {
      
       // Remove the "city" field
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
           ['shippingAddress']['children']['shipping-address-fieldset']['children']['city']['visible'] = 0;
       // Like above we can remove the "company" field also
       // Remove the "phone" field
       if (isset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
           ['shippingAddress']['children']['shipping-address-fieldset']['children']['telephone'])) {
           $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
               ['shippingAddress']['children']['shipping-address-fieldset']['children']['telephone']['visible'] = 0;
       }


       return $jsLayout;
   }
}

Output for Shipping new address form

Output for Billing address form

Optimize Your Magento 2 Checkout by Removing Unnecessary Fields in the Address 

Customizing your checkout process is crucial for improving user experience and boosting conversions.Magento 2 provides several methods to remove fields like city, telephone, and company from the address forms. Whether we can choose to remove fields by using plugins and change for checkout process to make it more efficient and user-friendly for your customers.

In the checkout process, we make it easier for the customers to complete their purchases without unnecessary distraction . If you need expert assistance in optimizing your Magento 2 store development services, Klizer is here to help!