FEWC WooCommerce Extra Checkout Fields

The checkout page on an eCommerce website is the page that handles payment/shipping information to complete a transaction. It typically includes various form fields to collect user information such as billing address, shipping address, payment method, and so on.

WooCommerce Extra Checkout Fields plugin is the best way to make your checkout page more user-friendly. With this plugin, you can edit/manage default checkout fields, and create new custom fields on your checkout page. You can optimize your checkout page with the fields which you believe are important to make your customers comfortable when they experience your checkout page.

Specifically, WooCommerce Extra Checkout Fields is a plugin that makes it easy to edit, hide, rearrange, and validate checkout fields, as well as add, edit, duplicate, and delete new custom fields with different custom field types to sections on your WooCommerce checkout page. Moreover, custom field data can be included in the order email, order detail page, and thank you page.

 What WooCommerce Extra Checkout Fields can do:

1. Add new sections:

• Add unlimited sections on the checkout page
• Edit/remove, set the position of custom sections
• Configure the custom section with name, title, title color, and position.

2. Manage WooCommerce existing checkout fields

• Set the priority of existing fields in each section on the checkout page
• Toggle to display or hide existing checkout fields on the checkout page
• Configure the existing fields with labels, placeholder
• Customize the existing fields by class, and define the class label and input class

3. Add new custom fields

• Add unlimited custom checkout fields
• Easy to change the new custom checkout field order
• Different types to define the field type: Text, Email, Phone, Number, Textarea, Checkbox, Checkbox group, Select, Radio, Datetime local, Time, Date, Week, Month, Password, Hidden, Url, Html/paragraph
• Toggle to display or hide custom checkout fields on the checkout page
• Duplicate/Remove custom checkout fields
• Configure the custom fields with labels, placeholder
• Customize the custom fields by class, and define the class label and input class
• Assign to appear: There is a metadata section to save the custom fields to new user meta data or order meta data and assign the custom fields to appear on the admin email, customer email, order detail page and thank you page.

Options and customizing features of WooCommerce Extra Checkout Fields

• Different types to define the custom checkout field
  • Text: defines a single-line text input field.
  • Email: is used for input fields that should contain an e-mail address.
  • Phone: is used for input fields that should contain a telephone number.
  • Number: defines a numeric input field. You can also set restrictions on what numbers are accepted.
  • Textarea: a text input field but you can enter text content in multiple lines.
  • Checkbox: defines a checkbox.
  • Checkbox group: allow your customer to select multiple choices.
  • Select: is used to create a drop-down list.
  • Radio: defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices..
  • Datetime local: specifies a date and time input field.
  • Time: allows your customer to select a time.
  • Date: is used for input fields that should contain a date.
  • Week: allows your customer to select a week on the year.
  • Month: allows your customer to select a month on the year.
  • Password: defines a password field.
  • Hidden: defines a hidden input field and does not visible to your customer.
  • Url: is used for input fields that should contain a URL address.
  • Html/paragraph: allow you to show a title or a paragraph with some HTML tag. 
• Design: There is a design section in each field for designing the field
  • Class
  • Label class
  • Input class
• Meta Data: You can save the custom fields to new user meta data or order meta data and assign the custom fields to appear on the admin email, customer email, order detail page and thank you page.
  • Where to save
  • Meta key name
  • Display in
• Manipulation
  • Edit fields: Click on the  icon to edit each field
  • Show/hide fields: Click on the icon to show/hide fields
  • Duplicate fields: Click on the icon to create a new same custom field
  • Delete custom fields: Click on the  icon to remove a field
  • Reset default: With a single click, you can return to the original state with the default fields.
  • Rearrange field(s): Drag and drop among fields to sort fields in your desired order
• Admin panel preview: The edition will be applied and visualized on the checkout customizer page so that you can observe the change easily

Required: 

Make sure those limits to a minimum as follows in order to free-trouble while installing:

1. WordPress 5.0+
2. PHP 7.0+
3. WooCommerce 7.0+

Download Plugin:

Go to Plugin/Add New/Upload Plugin/Choose file/ select plugin zip file fewc-woocommerce-extra-checkout-fields/click “Install Now“/click “Active plugin“.

Guiding video on how to install and set up:

FEWC is used on the WooCommerce Checkout page for managing fields. You can configure extra fields in the WordPress Customize settings.

To use FEWC, go to the Customize settings in WordPress. There are different ways to do this. You can access it from the FEWC settings:

Or by navigating to: WordPress >> Appearance >> Customize >> FEWC – Extra Checkout Fields For WooCommerce

Then, start managing the fields in the Billing and Shipping forms.

You can see the default WooCommerce checkout sections: Billing, Shipping, Additional information. Besides, you can add new Section if needed. Go to The Add new Section for more information.

Click on each section to edit the fields within that section. You can manage the default fields in WooCommerce. You can create as many new custom fields as you want. Resetting to default is possible. For more information, see the Edit Checkout Fields section of this documentation.

Click on the icon to edit and to the icon to display/hide a field. The edition will be applied and visualized on the checkout customizer page so that you can observe the change easily.

For more details on how to edit checkout custom fields, please go to How does it work section.

MANAGE SECTIONS

You can manage sections (edit/add/remove sections) on the checkout page. Go to this plugin’s customize:

There will be default sections on the WooCommerce checkout page: Billing, Shipping, and Additional information. Click on each section to edit the checkout fields.

You can add a new section by clicking on the Add new section button then define the section information.

1. Name: Enter the name of the section
2. Title: Enter the name of the section displayed on the frontend
3. Title color: Select the color for the title
4. Position: Select where this section is located
   • Before/After customer detail
   • Before/After billing form
   • Before/After registration form
   • Before/After shipping form
   • Before/After order notes
   • Before/After order review
   • Before/After cart contents
   • Before/After order total
   • Before/After terms and conditions
   • Before/After place order button

For example: Add a gift message

MANAGE CHECKOUT FIELDS

WooCommerce Existing Fields

Click to Billing, Shipping sections, Additional  information to edit checkout fields. Normally, the default checkout fields in Billing and Shipping sections include:

• First name
• Last name
• Company name
• Country/Region
• Street address
• Apartment/ suit/ unit etc.
• Town/ city
• State
• Zip code
• Phone
• Email address

With FEWC – WooCommerce Extra Checkout Fields, you can easily edit the WooCommerce existing fields, including:

• Drag and drop among fields to reorder the fields in a section
• Edit fields: Click on the  icon to edit each field, then the popup field detail will expand
• Show/hide fields: Click on the icon to show/hide fields
• Design fields: There is a design section in each detail field for designing

The field detail normally includes:

• General
  • Enable: Toggle to display or hide this field on the checkout page
  • Required: Enable if adding information in this field is mandatory
  • Label: Edit the field lable
  • Placeholder: Enter the example value which to demonstrate customers about this field
• Design
  • Class
  • Label class
  • Input class

New Custom Fields

With FEWC – WooCommerce Extra Checkout Fields, you can quickly add and manage custom fields with some simple manipulations:

• Add new fields: Click on the Add New Field button to add more custom fields
• Drag and drop among fields to reorder the custom fields in a section
• Edit custom fields: Click on the icon to edit each field, then the popup field detail will expand
• Show/hide custom fields: Click on the icon to show/hide fields
• Design custom fields: There is a design section in each detail field for designing
• Assign to appear: There is a metadata section to save the custom fields to new user meta data or order meta data and assign the custom fields to appear on the admin email, customer email, order detail page and thank you page.
• Duplicate custom fields: Click on the  icon to create a new same custom field
• Delete custom fields: Click on the  icon to remove a custom field

Click on the Add New Field button to create a new custom checkout field, the popup field detail will appear. There will be 3 main parts to define and customize the custom field which are:

• General:
  • Enable: To display or hide this field on the checkout page
  • Required: Enable if adding information in this field is mandatory
  • Label: Edit the field label
  • Type: Select the type of the field, there are different input types to choose from, they can be: Text, Email, Phone, Number, Textarea, Checkbox, Checkbox group, Select, Radio, Datetime local, Time, Date, Week, Month, Password, Hidden, Url, Html/paragraph. It is determined by the input type which specific information will be included in the detail field in the general section.
  • Placeholder: Enter the example value to demonstrate to customers about this field
  • Default value: The value which you entered or selected and will appear on the checkout field. If the customer wants to change, he has to enter or select another value
  • Description: Explain what the field is
• Design
  • Class
  • Label class
  • Input class
• Meta Data
  • Save as
  • Meta key name
  • Display in

IMPORT/EXPORT SETTINGS

This feature allows you to:

1. Duplicate the settings of this plugin on a store and apply it to another store.
2. Reset settings of all fields to the initial settings

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.