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.

More information at: Install and Activate Plugins/Extensions.

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)

checkout-field-editor-screen

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.
  • Clear row – Useful when aligning fields left and right — stops a field being shown on the same row as the current field.
  • 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.

Editing core fields ↑ Back to top

core-fields-editor

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

Note: Disabling or modifying core fields can cause unexpected results with some plugins; we recommend against whenever possible.

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.

checkout-field-custom-fields

Once a field is added, a blank row appears.

WooCommerce Checkout Field Editor

  1. 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 > System Status > Tools.
  2. Find the Checkout Fields.
  3. Select the Reset button. Any customizations to your fields will be removed.

Field display and checking values ↑ Back to top

Consider the following date picker field:

image3

In checkout, this is displayed:

image4

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

image5

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:

allergies-custom-field

Customizations ↑ Back to top

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer  for assistance.

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

Questions & Support

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

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

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

Back to the top