Hello Magento Friends,
Today we’re going to discuss how to set the character limit for the customer’s first name and last name on the Magento 2 checkout shipping page.
A clear and fluid checkout process is the key to making customers happy and keeping them coming back for more. One such issue that is overlooked is the intended length of customer names. Magento 2 by default allows any amount of characters to be entered for customer first names and last names, which sometimes create complications in layout and database constraints. Setting limits on customer names will make it easy for the merchants by making the checkout process less complicated and user experience more seamless.
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:
The character limit for entering customer first names and last names at the checkout’s shipping stage in Magento 2 can vastly improve the user experience by preventing difficult layout and database issues. After following this guide to add user names character limits, merchants can begin benefitting from more streamlined and efficient checkout processes. Perform whatever level of testing is necessary to make sure everything works as it should. Your store is now ready to fly, and allow your customers a hassle-free shopping experience.
Related articles –
- Magento 2: How to Add Label on all Lines in Street Address in Checkout Page
- How to Auto fill Checkout shipping address form fields in Magento 2
- How to Add a custom comment in Magento 2 checkout shipping address fields
- How to Change the Order of Shipping Fields on Checkout Page in Magento 2
Happy Coding!
