How to edit checkout fields in Magento 1 and Magento 2

Edit checkout fields in Magento 1 and Magento 2

Continuing our previous promise of discussion common Magento issues we're going to help you with editing checkout fields. When it comes to checkout experience a big deal of potential customers feels tired of focusing on required fields. This makes users spend a lot of needless time and consequently have difficulties on the way to desired purchase.

And that's why shopkeepers wish to remove some checkout fields such as fax, company or middle name. We think it's a good idea.

Let's start with learning how to edit Magento checkout page…

This tutorial will give you some ideas about how you can remove fields from billing address and shipping address steps of the checkout page, how you can change the sort order of fields display, etc. Making recommendations we'd suggest:

  • to start with default Magento onepage checkout.
  • to not modify original Magento templates. You can lose all changes after theme update.

Follow steps below to start removing checkout attributes from different Magento versions.

Magento 1

How to remove Middle name checkout field.

You can do it in Magento admin panel. Go to System > Configuration > Customers > Customer Configuration > Name and Address Options. Usually happens when the Middle Namefield is shown after upgrade from Magento CE 1.9.2.1+. So you need to go to the admin panel and simply click on Save. If this field is still displayed, please select "No" in the Show Middle Name field. Save. If you don't see changes after saving, please change the setting to " Yes" then back to " No" again. Save and refresh the page. Does it work now?

How to change the number of lines of Street address checkout field in the billing information.

By default two address lines are shown as Street address field. With Magento settings, you can change the number of lines from 1 to 4. Go System > Configuration > Customer section > Customer configuration > Name and Address Options. You can make changes in Number of Lines in a Street Address field.

How to remove States from shipping in Magento checkout.

You can hide States dropdown for countries where the state is not required. Go System > Configuration > General section > General > States Options. Please set Display not required State to "No".

How to make Zip/postal code checkout field as optional.

ZIP code is a required field to fill out on the checkout page. However, it can be modified. Go System > Configuration > General section > General > Countries Options. You can see the Postal Code is Optional for the following countries drop down. Please select countries for which zip code is not required.

Note: when you change settings mentioned above you'll get customer registration form modified.

Regrettably, you are not allowed to change the sort order of checkout fields from Billing address and Shipping address sections via default Magento functionality. However you can customize your templates and make some fields hidden. We do recommend you never hide required fields. It'd be better to make them optional first.

You can also focus on other effective Magento tool for solving the problem with checkout attributes. Review Firecheckout module for optimizing the checkout process at your website. Looking for simple checkout steps both for registered users and guests? Need some really important fields to show up in checkout? With this streamlined one-page checkout extension you'll receive much more benefits than with the default Magento checkout options:

  • You are allowed to make as optional the following fields: company, address, zip/postal code, city, country, state/province, telephone, fax.
  • Up to 5 custom fields can be set up to be shown on the checkout page.
  • The ability to change the sort order of checkout fields of shipping and billing information.
  • The ability to place housenumber into custom address field.
  • The ability to show checkout fields either inside or above the Order Summary block.
  • The ability to configure the billing address block placement.
  • The ability to show checkout fields at the checkout success page as well as in backend order grid.
  • Improved mobile styles for checkout fields.
  • All checkout fields are highly customizable. You are allowed to change the fields' Label, Placeholder, CSS class, apply formatting, validator, and much more.

Template modification

As you see we prefer to edit checkout fields in admin as opposed to remove them by template modification. Meanwhile, you are going to reach the original theme in order to remove the Fax field either from billing or shipping address checkout sections. First, you have to do is to change the template without overwriting the original file.

How to remove Fax field from checkout.

Look at paths to templates:

  • /app/design/frontend/[PACKAGE]/[THEME]/template/persistent/checkout/onepage/billing.phtml- for Billing address
  • /app/design/frontend/[PACKAGE]/[THEME]/template/checkout/onepage/shipping.phtml- for Shipping address

Let's find out how it works for RWD theme. We're going to use the default Magento installation with RWD.

  • [PACKAGE] - rwd
  • [THEME] - default

Please follow steps below

  1. Go to System > Configuration > Design in backend. Don't change the Package option. Please set the Template value in section Theme to mytheme.
  2. Copy following two templates from
  • /app/design/frontend/rwd/default/template/persistent/checkout/onepage/billing.phtml
  • /app/design/frontend/rwd/default/template/checkout/onepage/shipping.phtml

To

  • /app/design/frontend/rwd/mytheme/template/persistent/checkout/onepage/billing.phtml
  • /app/design/frontend/rwd/mytheme/template/checkout/onepage/shipping.phtml
  • Now you can see the code that has to be removed from directory mytheme.
  • In billing template

    <div class="field">
        <label for="billing:fax"><?php echo $this->__('Fax') ?></label>
        <div class="input-box">
            <input type="tel" name="billing[fax]" value="<?php echo $this->escapeHtml($this->getAddress()->getFax()) ?>" title="<?php echo $this->quoteEscape($this->__('Fax')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('fax') ?>" id="billing:fax" />
        </div>
    </div>
    

    In shipping template

    <div class="field">
        <label for="shipping:fax"><?php echo $this->__('Fax') ?></label>
        <div class="input-box">
            <input type="tel" name="shipping[fax]" value="<?php echo $this->escapeHtml($this->getAddress()->getFax()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Fax')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('fax') ?>" id="shipping:fax" onchange="shipping.setSameAsBilling(false);" />
        </div>
    </div>
    
  • Refresh the cache.
  • How to remove Company field from checkout.

    There are the same instruction steps as shown above. Please change the step # 3 only. You'll see the different code that must be removed from the directory mytheme.

    In billing template

    <div class="field">
        <label for="billing:company"><?php echo $this->__('Company') ?></label>
        <div class="input-box">
            <input type="text" id="billing:company" name="billing[company]" value="<?php echo $this->escapeHtml($this->getAddress()->getCompany()) ?>" title="<?php echo $this->quoteEscape($this->__('Company')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?>" />
        </div>
    </div>
    

    In shipping template

    <li class="fields">
        <div class="fields">
            <label for="shipping:company"><?php echo $this->__('Company') ?></label>
            <div class="input-box">
                <input type="text" id="shipping:company" name="shipping[company]" value="<?php echo $this->escapeHtml($this->getAddress()->getCompany()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Company')) ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?>" onchange="shipping.setSameAsBilling(false);" />
            </div>
        </div>
    </li>
    

    Magento 2

    Magento 2 seems to simplify developer workflow. Despite a big number of features, it still comes with a few changes in the admin panel. Probably the default configuration will be enriched soon. For now, we offer to look at the most common requests we receive.

    How to disable Middle Name checkout field.

    Go to Stores > Configuration > Customers section > Customer Configuration. Select "No" in the Show Middle Name field from Name and Address Options section.

    How to change the number of Street Address lines on checkout page.

    Go Stores > Configuration > Customers section > Customer Configuration > Name and Address Options and configure the Number of Lines in a Street Address option.

    How to make ZIP code as optional.

    Go Stores > Configuration > General section > General > Countries Options. In the Postal Code is Optional for the following countries drop down you may select countries where zip code value is not required.

    How to hide the States drop down on checkout page.

    You can hide States dropdown for countries where the state is not required. Go Stores > Configuration > General section > General > States Options. Set the Allow to Choose State if it is Optional for Country to "No".

    Summary

    You can also review some more useful articles that will help you to experiment with Magento functionality:

    We hope our guidelines covered the question of how to remove some checkout fields. If you still have a request about this issue, please discuss with us.

    Recommended Magento Templates & Extensions

    4 thoughts on “How to edit checkout fields in Magento 1 and Magento 2”

    Leave a Reply