How to Remove First Name and Last Name Required Validation from The Magento 2 Checkout Page
Vinh Jacker | 05-02-2024
The Most Popular Extension Builder for Magento 2
With a big catalog of 224+ extensions for your online store
Optimizing the checkout process is crucial for enhancing user experience and boosting conversion rates. One often overlooked aspect of this process is handling customer names. Although Magento 2 provides extensive customization options for merchants, certain default settings, such as requiring first and last names during checkout, may not be necessary, especially for anonymous purchases or guest checkouts.
In this guide, we’ll explore the steps to remove the first name and last name required validation from the Magento 2 checkout page, simplifying the process for both merchants and customers.
How to Remove First Name and Last Name Required Validation from The Magento 2 Checkout Page
Step 1: Create a custom module
First, you need to create a custom module in Magento. You can achieve this by creating the 3 files below:
-
Create a module directory located in
app/code/YourVendorName/YourModuleName -
Create a
registration.phpfile by using the following command:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'YourVendorName_YourModuleName',
__DIR__
);
- Create the
module.xmlfilein app/code/YourVendorName/YourModuleName/etcwith the specified code :
<?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="YourVendorName_YourModuleName" setup_version="1.0.0"/>
</config>
Step 2: Remove the required constraint
Method 1: Override file layout in Magento
Create a layout file to override the default Magento layout, thereby removing the requirement for inputting the first and last name.
To do this, make a checkout_index_index.xml file in the app/code/YourVendorName/YourModuleName/view/frontend/layout directory.
Please run the below code:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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">
<!-- Update first name field validation -->
<item name="firstname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
</item>
<!-- Update last name field validation -->
<item name="lastname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Method 2: Create a di.xml file
In the app/code/YourVendorName/YourModuleName/etc, create a 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">
<preference for="Magento\Checkout\Block\Checkout\LayoutProcessor" type="YourVendorName\YourModuleName\Block\Checkout\LayoutProcessor"/>
</config>
Next, create a class name LayoutProcessor.php in app/code/YourVendorName/YourModuleName/Block/Checkout
<?php
namespace YourVendorName\YourModuleName\Block\Checkout;
class LayoutProcessor extends \Magento\Checkout\Block\Checkout\LayoutProcessor
{
/**
* @param array $jsLayout
* @return array
*/
public function process($jsLayout)
{
$jsLayout = parent::process($jsLayout);
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['firstname']['validation']['required-entry'] = false;
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['lastname']['validation']['required-entry'] = false;
return $jsLayout;
}
}
Step 3: Install the module and clear the cache
Run the following commands in the terminal or SSH:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static:deploy -f
php bin/magento cache:flush
After completing the above steps, entering the first and last name will no longer be required during the Magento checkout process.
One Step Checkout for Magento 2
Cut down 80% of checkout time & increase 30% of conversion rates (Hyva ready)
Check it out!Wrap Up
In conclusion, by removing the first and last names required for validation from the Magento 2 checkout page, merchants can create a smoother way to purchase for their customers. We hope that this straightforward and easy-to-follow process will help to remove the required validation for first and last name from the checkout page easily. If you have any issues with following this guide, please don’t hesitate to ask for help.
Hello, I'm the Chief Technology Officer of Mageplaza, and I am thrilled to share my story with you. My deep love and passion for technology have fueled my journey as a professional coder and an ultra-marathon runner. Over the past decade, I have accumulated extensive experience and honed my expertise in PHP development.
Related Post
Shopify Themes Brooklyn: Enhancing Your E-commerce Experience
By discovering modern design, features, how to set up and some examples, we aim to help you elevate your e-commerce experience with the Shopify themes brooklyn.
Shopify Dawn Theme: Elevate Your Online Store’s Design
Let's unleash the power of Shopify Dawn theme! You will learn key features, easy customization steps & see inspiring examples on this guide.
How to Edit Your Checkout Page in Shopify: A Comprehensive Guide
Find out how to make your Shopify store's checkout better with our easy guide. Learn why it's important and get simple steps to change your checkout page.
How to Edit Shopify Theme: A Step-by-step Guide
Want to optimize user experience? Already get bored with the old Shopify store’s layout? Discover how to edit a Shopify theme by reading this article!
How to Cancel Shopify Subscription: Everything You Need to Know
Learn how to cancel your Shopify subscription stress-free. Follow our simple steps and get essential tips for a smooth process. Take control of your subscription management today!
Shopify Themes Brooklyn: Enhancing Your E-commerce Experience
By discovering modern design, features, how to set up and some examples, we aim to help you elevate your e-commerce experience with the Shopify themes brooklyn.
Shopify Dawn Theme: Elevate Your Online Store’s Design
Let's unleash the power of Shopify Dawn theme! You will learn key features, easy customization steps & see inspiring examples on this guide.
How to Edit Your Checkout Page in Shopify: A Comprehensive Guide
Find out how to make your Shopify store's checkout better with our easy guide. Learn why it's important and get simple steps to change your checkout page.
How to Edit Shopify Theme: A Step-by-step Guide
Want to optimize user experience? Already get bored with the old Shopify store’s layout? Discover how to edit a Shopify theme by reading this article!
How to Cancel Shopify Subscription: Everything You Need to Know
Learn how to cancel your Shopify subscription stress-free. Follow our simple steps and get essential tips for a smooth process. Take control of your subscription management today!
Website Support & Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.