woocommerce how to add checkout fields

WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Checkout Field Editor

The Checkout Field Editor provides an interface to add, edit and remove fields shown on your WooCommerce checkout page.

Installation ↑ Back to top

  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.

Setup and Configuration ↑ Back to top

Go to: WooCommerce > Checkout Fields.

Fields ↑ Back to top

There are three sets of Fields you can edit:

  • Billing – Payment and billing address section of checkout (payment must be enabled)
  • Shipping – Shipping section of checkout (shipping must be enabled)
  • Additional – Appear after the billing and shipping sections of checkout, next to order notes (order notes must be enabled)

Columns ↑ Back to top

  • Name – Name of field, which is used as the meta key to save info. Must be unique.
  • Type – Field type. See ‘Types’ below.
  • Label – Label for input shown in checkout.
  • Placeholder / Option values – Placeholder text for inputs OR the options for select boxes, radios etc. Values should be separated by a pipe (|). Two scenarios are explained below:
  • An options list starting with a pipe creates an empty choice. Used in conjunction with a required select field, it will force the user to choose a valid option.
  • An options list without a pipe as first character will make the first option in the list the default choice whether the field is required or not.
  • Position – Left, right or full width. This applies CSS styling to the box.
  • Validation rules – Choose validation rules to apply: Email, number, and required are supported.
  • Display Options – Option to display fields in thank you emails, thank you pages, or on order detail pages. (CFE 1.1.8+)
  • Types ↑ Back to top

    These custom types are supported:

    • Text – standard text input.
    • Password – password text input.
    • Textarea – A textarea field.
    • Select – A dropdown/select box. Requires options set.
    • Multi-select – A multi-select box. Requires options set.
    • Radio – A set of radio inputs. Requires options set.
    • Checkbox – A checkbox field.
    • Date picker – A text field with a JavaScript data picker attached.
    • Heading – Adds a heading to allow separating fields into groups.

    Editing core fields ↑ Back to top

    In the Billing and Shipping sections, there are core fields highlighted in purple.

    Disabled fields

    Some core fields have options disabled and cannot be changed:

    • Names of core fields
    • Types of special core fields (country and state)
    • Fields that change dynamically based on the chosen country of a user (address 1, address 2, city, state, postcode) cannot have custom validation rules, e.g. Required fields are determined by locale, not by your settings.

    With those limitations in mind, you can:

    • Change the labels and position of the fields.
    • Disable them by ticking the checkboxes per-row and clicking the ‘Disable/Remove’ button. Disabled fields are then greyed out. Use at your own risk.

    Re-enable core fields by checking the rows and pressing the ‘enable’ button.

    Adding and editing custom fields ↑ Back to top

    From the bottom of the fields table:

    1. Select the Add Field button.

    Once a field is added, a blank row appears.

    2. Enter your text and preferences.

    3. Save Changes.

    Resetting checkout fields ↑ Back to top

    To reset your fields back to the original settings:

    1. Go to: WooCommerce > Status > Tools.
    2. Scroll down to Checkout Fields.
    3. Select the Reset Checkout Fields button. Any customizations to your fields will be removed.

    Field display and checking values ↑ Back to top

    Consider the following date picker field:

    In checkout, this is displayed:

    After placing an order, the field will be visible in the Admin section ‘Custom Fields’ panel:

    Usage ↑ Back to top

    On the front end, customers can see and enter info in a custom field displayed during checkout. For example, Delivery Date and then use the datepicker to select one:

    Or enter text under Food Allergies:

    Customizations ↑ Back to top

    Extending the Date Picker Year Range ↑ Back to top

    It is possible to extend the year selection range of the date picker fields by placing the following code in your child theme’s “functions.php” file, or in the designated area of your theme’s “functions.php” file:

    This adjusts the year selector of the date picker to expand by 40 years.

    Setting a default value for a radio button field ↑ Back to top

    It’s possible to set a default value for a radio button checkout field by placing the following code in your child theme’s “functions.php” file, or in the designated area of your theme’s “functions.php” file:

    The above snippet assumes that the field is a “billing” field, that the field name is “test_radio” and that the desired default value is “one.”

    Add custom fields to WebHooks API ↑ Back to top

    Select Field Placeholder text ↑ Back to top

    You can add placeholder text when using the Select field by adding 2 || to separate the placeholder from the option values.
    For example:
    Placeholder || Option 1 | Option 2 | Option 3

    Questions & Support ↑ Back to top

    Have a question before you buy? Please fill out this pre-sales form.

    Already purchased and need some assistance? Get in touch with a Happiness Engineer via the Help Desk.

    Relevant Links

    Installing and Activating WooThemes Licenses

    How to Get Help

    WooCommerce – the most customizable eCommerce platform for building your online business.

    How to Add Custom Fields to WooCommerce Checkout Form

    Goal of this Tutorial – Learn how to add custom fields to WooCommerce checkout form page and capture additional user information. Also, learn how to check the captured information inside the dashboard area later.

    If you are running an online store using WordPress, chances are you would be using the excellent WooCommerce plugin. Honestly, nothing rivals popularity of WooCommerce among ecommerce WordPress plugins. It’s powerful, easy-to-use, and open source system with everything to get you started right away. In a sense, it is the very embodiment of spirit of WordPress itself. But just like WordPress, in specialized cases you will need to customize or extend its functionality to completely fit your needs. That is not necessarily a bad thing since not everyone needs all the bells and whistles from start. And it also allows a flourishing WordPress community offering solutions for different types of businesses with niche requirements.

    As an ecommerce site owner, one of the most common things you do is to collect information about your users. And as common knowledge says, it must be done in subtlest way possible. You wouldn’t want to riddle your store with popups and customized forms. One thing that every buyer expects while shopping online is to register an account on the site while making their first purchase. It appears natural therefore, to collect information while the user is checking out, since it is part of completing the buying process – and almost nobody minds filling out the checkout form at that moment. Now here’s the bummer – there is no built in option to modify the WooCommerce checkout form page.

    Since you have already found your way here, I am sure you would be curious to know how to get around this little problem of customizing WooCommerce checkout form. The solution below does not requires any knowledge of coding whatsoever and you won’t need tinkering with any files either. But there are couple of prerequisites that ask for very little effort. Firstly, guest checkout should be turned off in your WooCommerce Settings (Go to WooCommerce → Settings → Checkout Tab → Checkout Process and uncheck Enable guest checkout). See, if you are allowing guest checkouts, you are essentially okay with customers not creating an account during purchases, which is absolutely fine by the way. It is also quickest way to allow checkouts to new customers. But when guest checkout is turned on, WooCommerce does not renders its registration form during checkout, leaving us with no way to hook custom fields. Therefore, it is a decision you must make before moving. Secondly, you should have a copy of RegistrationMagic Premium installed and configured. Once these two things are taken care of, we can proceed with the actual implementation of customized WooCommerce checkout form.

    Disabling WooCommerce Guest Checkout

    Now to capture user information, we need a user registration form. Creating registration forms is straightforward in RegistrationMagic and you can easily add custom fields to it. While creating the registration form, please keep in mind that we will be hooking custom fields in this form to WooCommerce registration form, thus creating a single expanded form. The custom fields of this form will appear below the regular WooCommerce registration form fields.

    For the purpose of this demonstration and for simplicity, we will only add a single custom field to WooCommerce checkout form. Suppose we wish to collect data about users’ age while they register. This is a field not available in default WordPress profiles. First, you’ll need to create a new form in RegistrationMagic → Registration Forms → New Form. In the next popup, name it (although you are free to name it anything you want, for this example we’ll name it User Age). Keep default form type selected and save it. You’ll now see the form card appear in All Forms area.

    The new form will appear in the All Forms area

    Next, click Fields link on the form card, which will take you to Fields Manager. Click on Add Field and in the new popup select Number field type. In the field settings, choose a label for this field. Here we’re labeling it Your Age. Also enable Add This Field To User Account and define a user meta key if you already have one. Additionally, if you want to make this field mandatory, enable Is Required option. Save it and you are done here.

    Creating Custom Field

    Configuring Custom Field

    Custom Field Created Successfully

    Next, we will add this form to WooCommerce registration form. For that, go to RegistrationMagic → Global Settings and click on WooCommerce Integration tab. Inside you will find an option Registration Form with a drop down list of forms you have already created in RegistrationMagic. Select the form User Age (or whatever you had named it). Hit save.

    You have now successfully added the RegistrationMagic registration form to WooCommerce registration process. To quickly check it, let’s visit the store and purchase a product. Make sure you are not logged in. Add a product to the cart, click View Cart and then Proceed to checkout. On the new page you can now see Your Age file visible down below at the end of the registration form.

    Field is Now Visible on Checkout Form

    Fill the required information and complete the process. Congratulations! Once the order has been created, you have successfully captured some extra user information during the WooCommerce checkout process.

    But how will you check it?

    One way of doing this is by going to RegistrationMagic → User Manager inside the Dashboard. You’ll have to log in once again as admin. Here you’ll see that RegistrationMagic displays a lot of WooCommerce information right inside its User Pages. Click on View in front of the recently registered user.

    Recently Registered User

    In the first tab, you’ll see the label Your Age with value on the right side. If you had added multiple custom fields, all of them would have been visible here.

    Custom Field and Value in User Manager

    Click on the tab with Woo icon and you will see the order this user just placed. You can view and edit the order from here.

    WooCommerce Data in User Manager

    There’s also some meta information that RegistrationMagic captures about the user without any actual user input. To check that, visit Inbox in RegistrationMagic and view the Submission received with the last registration. You will see it has captured user IP, Browser Name, Submission Time, and of course the age.

    Latest Submission in Inbox

    You can find even more information in Form Analytics and Field Analytics areas like the time user took to fill out the WooCommerce Checkout form, or pie chart for option list custom fields.

    For further analytical and data mining purposes, you may want to download the captured custom fields information in a file that can be opened inside spreadsheet program on your computer. You can do that by visiting the Inbox area and selecting the form from the dropdown – User Age, in our case. And click Export All. It will download a CSV file on your hard disk which can be easily imported into popular spreadsheet programs like MS Excel, Apple Pages etc.

    CSV File Download

    CSV File Opened as SpreadSheet

    As you can see from above example, combining RegistrationMagic with WooCommerce opens up a host of new opportunities about how users data can be captured through WooCommerce Checkout Form. We hope you will find the information useful and easy to implement. If you have any questions, feel free to ask in the comments below and we’ll get back to you. Cheers!

    How to Add Custom Fields to WooCommerce Checkout Page

    The one aspect that I have learnt about the WooCommerce ecosystem is that it is a huge pool of absolutely innovative functionalities, which if used effectively can prove to be advantageous to your eCommerce business in a variety of ways.

    This also means that there is always something new to explore and learn in the WooCommerce domain. Weirdly enough I have recently gotten the opportunity to be involved in some interesting WooCommerce development work. And as always I am going to share it with you.

    Like for instance recently I wrote about Integrating WooCommerce with an External Order Management System. Today I am going to talk about the various steps that you must to go through to add custom fields to WooCommerce checkout page.

    By default WooCommerce checkout page provides users with predefined fields which have been placed in a particular order on the checkout page.

    Now let us imagine we want to add ‘Title’ field just before the First name field on the checkout page. To achieve this output along with making changes to the default Checkout page certain changes will have to be made to the Order page. Minor tweaks will then have to be done to the user’s Account page too as these changes need to be reflected there too. While the best way to incorporate the code into the website would be through the use of a plugin it can also be included in the functions.php file of theme.

    Step 1: Define an Array of Fields on Checkout Page

    • The foremost step to add custom fields to WooCommerce checkout page would be to define an array with the fields that you want to display.
    • The order of the fields that will be displayed on the checkout page will be same as that defined in the array.
    • Also, the array of already existing fields will be separate from the array of custom fields that are added to the checkout page.
    • In our example we will remove the ‘Company’ field from the checkout page and add the ‘Title’ field before the ‘First Name’ field on the checkout page. The following block of code can be used to define the array.

    Step 2: Add Custom Fields to WooCommerce Checkout Page

    • A function will then have to written to add custom fields to checkout page. This function should be written on the ‘woocommerce_default_address_fields’ hook provided by WooCommerce.
    • Once this has been done the additional fields will be now be visible on the checkout page. Furthermore the updated fields will also be displayed on the user’s account page.
    • Below is a representation of the checkout page after the custom fields have been added to the page.

    Step 3: Concatenate Fields as per Requirement

    • Some might want to concatenate two or more strings to display them on the ‘Order Page’. For example you might want to display the title, first name and last name together on a single line.
    • To do so the contents of the three fields will have to be concatenated as below.

    Step 4: Display Custom Fields on Order Page

    • By default the the checkout page fields are displayed on the order page too.
    • However, when fields are added or removed from the checkout page these changes should also be reflected on the order page. In order to do so the following block of code should be used.
    • With this code the billing address and shipping address will be displayed along with the updated list of fields on the order page in the back end as well as on the single order page in the WooCommerce dashboard.

    Step 5: Display Fields on Account Page

    • Just like we displayed updated list of fields on the order page the custom fields will also have to be displayed on the user’s account page. This can be done with the following block of code.

    Step 6: Edit Option on Single Order Page

    • Another, tweak that will have to be made is to add the custom fields in the edit option on the single order page in the dashboard.
    • Once the above code is implemented the changes in the single order page of the dashboard will look as below.

    With that last piece of code there we are good to go. If you follow all the above steps properly you should be able to add the custom data to the the checkout page in WooCommerce with ease. However if you are still having difficulties you can revert to me with your queries. Also, let me know your views on the post in the comment section.

    Leave a Reply

    Your email address will not be published. Required fields are marked *