How To Add a Custom Field to Checkout for WooCommerce
There are a few ways to add a custom field, depending on your exact needs.
Option 1: Use WooCommerce Checkout Field Editor
WooCommerce Checkout Field Editor is the official checkout field editor plugin.
When active with CheckoutWC, by default only the Additional Fields tab is available:
Simply add your fields and save.
What it looks like on checkout:
Date picker expanded:
Modifying Billing and Shipping Address Fields with Checkout Field Editor
Most stores don't need to modify the billing and shipping address fields (and shouldn't!)
But if you would like to use Checkout Field Editor to modify your Billing or Shipping address, here's how you do it.
Go to Settings > CheckoutWC > Integrations and check the box next to "Enable Checkout Field Editor address field overrides."
Modify your addresses under WooCommerce > Checkout Fields.
If you are adding a new field to the billing address, you need to add the same field to the shipping address so that the value will be saved to the billing address when the customer selects "Same as shipping address".
To ensure your fields work properly with this functionality, do the following:
- Prefix your shipping address fields with shipping_ or billing_. Example: billing_fax
- Use the same name for fields that should be synced when 'Same as shipping address' is checked. If you add shipping_fax, make sure you name your billing field billing_fax.
Option 2: Manually add a custom field to your functions.php file.
Here's a snippet demonstrating how to add a greeting card field:
Here's how to add a signature required checkbox:
Option 3: Use Checkout Add-ons
Checkout Add-ons can also be used for custom fields. These work best if you intend to charge extra for certain options. You can use it without charging, however each field will show up with a $0.00 price line in the totals area.
You will need a license for Checkout Add-ons, which you can get here:
Then just follow their guide to add a custom field: