How to edit checkout fields in Magento 1 and Magento 2

Edit checkout fields in Magento 1 and Magento 2

We continue our previous promise to discuss common Magento issues. Today we're going to help you with editing checkout fields. It's important for a good checkout experience. Let's help customers feel easier in filling the required fields. It will save time. And as a result, will bring them closer to the desired purchase.

First, we have to understand how to edit the Magento checkout page.

The tutorial has some ideas about how you can remove fields or change them. Making recommendations we'd suggest:

  • to start with default Magento one-page checkout.
  • to not change 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 the Magento admin panel. Go to System > Configuration > Customers > Customer Configuration > Name and Address Options. Sometimes you can see the Middle Name field since upgrade from Magento CE 1.9.2.1+. So you need to go to the admin panel 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?

Street address checkout field. How to change the number of lines?

Default Magento shows 2 address lines Street address field. Via 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 the 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. Yet, you are able to change it. Go System > Configuration > General section > General > Countries Options. You can see the Postal Code is Optional for the following countries dropdown. Please select countries for which zip code is not required.

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

Magento doesn't allow for changing the sort order of checkout fields in Billing Shipping address sections. 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.

Here you can use an effective Magento solution. Review the FireCheckout module. Looking for simple checkout steps both for registered users and guests? Need some more important fields to show up in checkout? With FireCheckout you'll receive extended Magento checkout functionality:

  • You can set the following fields as optional: company, address, zip/postal code, city, country, state/province, telephone, fax.
  • You can show up to 5 custom fields on the checkout page.
  • The ability to change the sort order of checkout fields.
  • The ability to place house number into the 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 the backend order grid.
  • Improved mobile styles for checkout fields.
  • All checkout fields are customizable. You can 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 but not to remove them by template modification. Yet, you can still reach the original theme 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 please remove the following code 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 codes 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. For now, we offer to solve 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.

    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 drop down you may select countries where zipcode 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

    Review a few more useful articles. It 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

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

    Leave a Reply