How To Customize The Required Checkout Form Fields

Have you ever wonder how to modify the built-in form fields from required to optional?

You probably already tried to edit them inside the admin panel, and un-tick the “Yes this field is required” checkbox. That ends up with an error, telling you the field can not be modified, since it is required for the application to function.

Do not worry anymore, there is a way around this!

Let’s consider you need to change the built-in Phone Number field by making it optional.

Here are the steps for this.

Go to Settings > Account Sign-up Form > Address Fields tab and using drag and drop, move the Phone Number form field under all the other fields. Phone Number should be the last field, like in this screenshot: .

Now go ahead, and Edit the Phone Number form field. For the following code to function, make sure the Field Name is “Phone Number1” without quotes, like in this screenshot:

, and do not forget to assign a Default Value to that field.

At this point, click the Advanced tab, on the same Edit process, which you started before, and on the Inline CSS Style, add: “display:none;” without quotes, like in this screenshot:

.

Then Save the changes.

Go under Settings > Design > Edit HTML/CSS > HTMLHead.html panel right before the </head> add the next code(the document ajaxComplete is for the express checkout page, while the document ready is for the create account page):

<script type="text/javascript">
    $(document).ajaxComplete(function() {
        hideFormField('Phone Number1');
    });
    $(document).ready(function() {
        hideFormField('Phone Number1');
    });

    function hideFormField(formFieldName) {
        if ($(".FormFieldLabel:contains(" + formFieldName + ")"))
            $(".FormFieldLabel:contains(" + formFieldName + ")").parent().hide();
        }
    }
</script>

Here is a screenshot with that code:

After adding it, do not forget to Save the changes.

Check the storefront, and see there is no phone number field inside the account creation page, here is a screenshot of the shipping address:

The field will also be hidden from the billing information on the checkout page and the account creation page.

At this point, if all you needed was to hide the field, you are done, but if you need a different field, non-required for the phone number, then go back to the admin panel, under Settings->Account Sign-up Form->Address Fields tab.

At this point, Create a new field in there->and select it to be a Text Field. Name it Phone Number, leave it non-required, and save it, like in this screenshot:

The system will create it as the last form field on your list, and you must move it anywhere above the Built-in Phone Number, using drag and drop. I moved it right above it, like in this screenshot:

Check the store front once again, and see how the new, optional Phone Number field appears. Here are screenshots on how it looks on my store's account page:

You can follow these steps with any other built-in form field, as long as you will edit the script above to contain the name of your needed form field.

Would you give these steps a try?

In case the above steps are not working for your store, for some reason, do not hesitate to contact us, and we can modify the script if needed.