How to Add Custom Field to WooCommerce Checkout Page | themelocation

How to Add Custom Field to WooCommerce Checkout Page?

Free Plugin to Add Custom Fields Checkout page -> Download at WordPress.org

This tutorial will help you understand easily how to add custom field to a checkout page. However, if you are not knowledgeable of actions and functions, this article may not be for you.

A custom field is necessary in collecting any additional information from the purchasers before they can complete an order.

To add custom field to the checkout page,we will follow different approaches such as:

  • WooCommerce “Checkout Field Editor” extension (single site license $45)
  • WooCommerce Checkout Manager
  • Code

Here’s what these approaches look like:

1- “Checkout Field Editor” extension: http://www.woothemes.com/products/woocommerce-checkout-field-editor/

2- WooCommerce Checkout Manager : http://wordpress.org/plugins/woocommerce-checkout-manager/

And then, make sure to download this plugin and install. Here’s how:

Go to Admin Panel > Settings >WooCommerce Checkout Manager

The result will show a list of all the fields from billing page to cart page. Scroll through the page and down to the bottom.

You should then find this section = Add New Field Section =

Fill out the values and hit “Save Changes” button on the right upper corner.

Now if you go to the Checkout page, you will see the new field in the form of;

This part is where we would like to add the custom field to the checkout page. To start with coding, we will need to do the following steps stated below.

3- Code:

First and foremost, we need to add a function and action to our functions.php file. And then we can use this code to begin customizing the checkout page:

/**

* Add the field to the checkout page

*/

add_action( 'woocommerce_after_order_notes', 'some_custom_checkout_field' );

functionsome_custom_checkout_field( $checkout ) {

echo '<div id="some_custom_checkout_field"><h2>' . __('Heading') . '</h2>';

woocommerce_form_field( 'some_field_name', array(

'type'         => 'text',

'class'         => array('my-field-class form-row-wide'),

'label'         => __('Additional Field'),

'placeholder'   => __('Some hint'),

'required'     => true,

), $checkout->get_value( 'some_field_name' ));

echo '</div>';

}

So after adding this text to the custom field, the checkout page should look like this:

/**

* Process the checkout

*/

add_action(‘woocommerce_checkout_process’, ‘some_custom_checkout_field_process’);

functionsome_custom_checkout_field_process() {

// if the field is set, if not then show an error message.

if ( ! $_POST[‘some_field_name’] )

wc_add_notice( __( ‘Please enter value.’ ), ‘error’ );

}

Now we have added a new field to the checkout page, and we would like to ensure that all additional information, including the check-out detail, entered into the custom field by the customer is saved.

We can do this by adding the following code:

/**

* Update the order meta with field value

*/

add_action( ‘woocommerce_checkout_update_order_meta’, ‘some_custom_checkout_field_update_order_meta’ );

functionsome_custom_checkout_field_update_order_meta( $order_id ) {

if ( ! empty( $_POST[‘some_field_name’] ) ) {

update_post_meta( $order_id, ‘Some Field’, sanitize_text_field( $_POST[‘some_field_name’] ) );

}

}

With this code, the customer’s additional information will be now saved.

We are hoping that this tutorial answers your questions regarding the customization of your WooCommerce checkout page. And if there is anything we can help you with, do not hesitate to leave your comments below.

One Response to How to Add Custom Field to WooCommerce Checkout Page?

  1. Ahmed Asghar October 15, 2015 at 11:02 am #

    Thanks for sharing such a useful information.

Leave a Reply