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. 

Example configuration:

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.

Step 1:

Go to Settings > CheckoutWC > Integrations and check the box next to "Enable Checkout Field Editor address field overrides."

Step 2:

Modify your addresses under WooCommerce > Checkout Fields.

Step 3:

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:

  1. Prefix your shipping address fields with shipping_ or billing_. Example: billing_fax
  2. 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:

https://woocommerce.com/products/woocommerce-checkout-add-ons/

Then just follow their guide to add a custom field:

https://docs.woocommerce.com/document/woocommerce-checkout-add-ons/

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us