Articles in this section
Custom Fields
Updated
In this article
- Add New Field
- Edit Field
- Delete Fields
- Rearranging Fields
- Show/Hide Fields
- Reset to Default Settings
- Overriding a Default Field
Add new field
To add a field:
Navigate to the WooCommerce → Checkout & Register Editor
Click on the Add new field button.
3. Enter a Name, Field Type, Label, and other details of your field.
4. Set display rules from the Display Rules option if required.
5. Set display styles from the Display styles option if required.
6. Set price details from the Price details option if required.
7. Click on the Save Field button.
Basic Info
Field Type
The type for the field. It could be text, password, text area, select, checkbox, radio, etc.
Name
Unique name for the field. No two fields can have the same name.
Label or Field
The display label for the field.
Placeholder
The placeholder property is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for an email field, the expected format name@example.com can be displayed. The short hint is displayed in the input field before the user enters a value.
Character Limits
The max length property specifies the maximum number of characters allowed in the input field.
Field Width
Description for the field. The description is displayed below the field label.
Validations
Choose validators that should be applied to the input field. Email, Phone, and Number are supported out-of-the-box. You can define your own validation rules in the Advanced Settings section. Any validation rule defined in the Advanced Settings section will appear in the select box. To learn more about custom validators and their configuration, see Custom Validators.
Default Value
You can assign a default value for the field. This value will be shown as the default value when the checkout form is loaded.
Required
If checked, the field will be set as a mandatory field.
Enabled
Uncheck this checkbox to hide/show this field.
Price Details
Price
Add an additional price to the order total based on the field value.
Price Type
Taxable and Tax Class
To learn more about price fields and their configuration, see Price Fields.
Edit field
To edit a field:
Navigate to the WooCommerce → Checkout & Register Editor.
Click on the Edit button near the field you want to edit.
3. A popup form will be displayed, you can edit any field property from this form.
4. Once done with the edit, click on the Save button to save the changes.
Delete Fields
To delete a field:
Navigate to the WooCommerce → Checkout & Register Editor.
Select the fields you want to delete using the check-boxes on the left side of each field.
Click on the Remove button from the action bar.
4. The deleted fields will be highlighted with a pink color background and disappear.
5. Click on the Save changes button to confirm the delete.
Rearranging Fields
To rearrange a field:
Navigate to the WooCommerce → Checkout & Register Editor page.
Move the field up or down using the move handle at the leftmost side of each field.
Once fields are rearranged, click on the Save changes button to save the changes.
Show/Hide Fields
To Show or Hide field(s) → Select field(s) using the check-boxes at the left side of each field, then click on ‘Show’ or ‘Hide’ button. The selected fields will be marked as disabled and shown in a grey background color.
Finally, click on the ‘Save Changes’ button to actually show/hide selected fields.
Reset to Default Settings
To revert all changes, click on ‘Reset to default fields’ button. Then all your changes will be removed and reset to the WooCommerce default fields set.
