Follow below steps to add custom checkout fields to WooCommerce.

Scenario: We want to create a new address field named as territory. It will be a drop down field and will be used to decide the shipping cost.

Create the new field/s on the checkout page

To create a similar field in shipping address, $fields array would need to be duplicated mentioning [‘shipping’] instead of [‘billing’]

Now let us understand the parameters used in the above code

Hook: Creating a new field uses woocommerce_checkout_fields hook

type: Since this an drop down field the type of the field is select. If you want a mobile number field it could be a text field

required: specify whether the field is compulsory or not. In our case we are calculating the shipping cost based on this field so it is compulsory.

class: 

  1. form-row-wide: The new field will occupy the entire div width for the billing section
  2. form-row-first: The new field will appear in the first half area of the row (like the first name field)
  3. form-row-last: The new field will appear in the last half area of the row (like the last name field)
  4. address-field: specifies that it is an address field
  5. update_totals_on_change: Since we want to update the shipping price on the checkout page based on this field this class triggers the ajax update process on field value change
  6. options: Drop down field options can be provided using this parameters. Obviously this field will not be applicable for text box

Validate the newly created field

Here we are just specifying the error message to display when the field is left empty

Save the field data

Here we are saving the data to the postmeta table for the corresponding order_id after the form is submitted

Show the custom field value on the orders page under billing section

 

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *