How to add custom checkout fields in WooCommerce
WooCommerce Checkout for Digital Goods removes the checkout fields digital orders don't need. It also lets you add your own.
When you add a field, the Type setting decides what the shopper sees: a text box, a dropdown, a date picker, or just a line of text. There are 12 types to pick from.
For example, if you sell an online course, you can add an Email field for a second delivery address and a required Checkbox for your terms.
In The Article
Benefits
Picking the right field type can help you:
- Cut typos, since Email, Number, and URL fields only accept the right kind of value.
- Ask for exactly what you need, from a short answer to a tick box to a date.
- Add context to the form with Paragraph and Heading; no code needed.
How to Choose a Field Type
Step 1: Open the Add New Field window
Open the plugin settings "Dotstore Plugins -> Digital Goods For Checkout" and stay on the General Settings tab. In the Checkout Billing Fields section, click Add New Field.
Step 2: Pick a field type
Open the Type dropdown. Text is selected by default.
| Type | What the shopper sees |
|---|---|
| Text | A single-line box with the field label. A placeholder hints at what to enter, and a default value is pre-filled if you set one. |
| Looks like a text box. Only accepts a valid email address. | |
| Number | Looks like a text box. Only accepts a number. |
| URL | Looks like a text box. Only accepts a web address. |
| Textarea | A larger box for more than one line of text. Label, placeholder, and default value work the same as Text. |
| Checkbox | A tick box next to the label. It starts ticked when Checked by default is on. If the field is Required, the shopper must tick it before placing the order. |
| Select | A dropdown of the options you added. It starts on "Select an option" until the shopper picks one. |
| Radio | The field label with one selectable circle per option. The shopper can choose only one. |
| Date | A date picker. Classic checkout only. |
| Time | A time picker. Classic checkout only. |
| Paragraph | The content you entered, shown as plain text. It isn't an input, so there's nothing for the shopper to fill in. |
| Heading | The label shown as a heading, H1 to H6. H3 is the default. It isn't an input either. |
Note: Block checkout doesn't support Date and Time. Use classic checkout if you need them.
Step 3: Finish the field settings
Fill in the rest of the window. Depending on the type, that can include the label, placeholder, Default Value, and the Required and Display in Emails checkboxes. For Select and Radio, add the options the shopper can choose from [Add option-entry UI label].
Save the field when you're done.
Step 4: Check the checkout page
Add a digital product to your cart and open the checkout page. The new field should appear where you placed it. Try it as a shopper would, including leaving a required field empty.
Example Use Cases
Second delivery email: Use Email if buyers often want the download sent to a different address.
Terms acceptance: Use Checkbox with Required turned on. The order can't go through until the box is ticked.
Course start date: Use Date to let buyers pick when they want access to begin. This works on classic checkout only.
Conclusion
The Type setting controls how each extra checkout field looks and what it accepts. Choose the type that fits the answer you need, and keep Date and Time for classic checkout.
FAQs
1. Where do I add a new checkout field?
Go to the General Settings tab, find Checkout Billing Fields, and click Add New Field.
2. Why can't I use Date or Time on my checkout?
Block checkout doesn't support them. They work on classic checkout only.
3. Do Paragraph and Heading collect anything from the shopper?
No. They only display text, so the shopper has nothing to fill in. Use them to explain or group the fields around them.
4. What happens if a required checkbox isn't ticked?
The shopper can't place the order until they tick it.