Magento 2: How to Set Character Limit for Customer Firstname and Lastname on Checkout Shipping Page

Dhiren Vasoya

10 months ago

Hello Magento Friends,

Today I will explain about setting character limit for customer’s first name and last name on Magento 2 checkout shipping page.

A seamless and efficient checkout process is crucial for customer satisfaction and retention. One often overlooked aspect of this process is the length of customer names. In Magento 2, the default settings allow for unrestricted character input for customer first names and last names, which can sometimes lead to layout issues or database constraints. However, by implementing character limits for these fields, merchants can streamline their checkout process and ensure a more consistent user experience.

Let’s find out how to set character limits for customer first names and last names on the checkout shipping page in Magento 2.

Steps to Set Character Limit for Customer Firstname and Lastname on Checkout Shipping Page in Magento 2:

Step 1: Create checkout_index_index.xml file inside the view folder at the following path.

app/code/Vendor/Extension/view/frontend/layout

Then add the code as follows

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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">
                                                                <item name="firstname" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                    <!-- From here you can set the length of the  first name characters.-->
                                                                        <item name="min_text_length" xsi:type="number">5</item>
                                                                        <item name="max_text_length" xsi:type="number">30</item>
                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                        <item name="max-words" xsi:type="number">4</item>
                                                                    </item>
                                                                </item>
                                                                <item name="lastname" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                <!-- From here you can set the length of the  last name characters.-->
                                                                        <item name="min_text_length" xsi:type="number">5</item>
                                                                        <item name="max_text_length" xsi:type="number">30</item>
                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                        <item name="max-words" xsi:type="number">4</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Step 2: Then, we need to run the below commands.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
php bin/magento cache:flush

Output:

Conclusion:

Incorporating character limits for customer first names and last names on the checkout shipping page in Magento 2 can greatly improve the user experience and prevent potential layout and database issues. By following the steps outlined in this guide, merchants can easily implement these limits and ensure a more streamlined and efficient checkout process for their customers. Remember to test the changes thoroughly to ensure everything works as expected. With these enhancements, you can elevate your Magento 2 store and provide a more user-friendly shopping experience.