How to Customize WooCommerce CheckOut Form

When we set up an online store in Woocommerce, one of the biggest headaches is how to set up some of its parts.

The plugin itself allows little flexibility, and the rain of extensions available from the software itself is paid.

So, if we want to customize the form that appears when someone completes a purchase, we have 3 options:

1. Pass by cashier
2. Search for a free alternative plugin
3. DIY, which by its acronym in English means, do it yourself.

In this mini-article, We are going to focus on the last two points. So, as we used to say: Pass, enjoy, learn and share.

1. Plugin: The eternal solution
2. With code

#1. Plugin: The eternal solution

As always, the quick way to not warm our heads is a plugin.

On this occasion, we recommend Woo Checkout Field Editor Pro, a simple extension that is integrated into the Woocommerce menu and allows you to create new fields, activate/deactivate existing ones, change them in order, etc.

#2. With code

WooCommerce has two types of checkout form:

• Billing form
• Shipping Form

That may or may not contain the same fields.

These forms are, in practice, filters that we call from the functions.php and to those we add in a array the fields to display and their properties.

So that, the first step would be to open the functions.php of our active theme, which is usually on the following path: http://www.ourdomain.tld/wp-content/themes/ theme_name/functions.php

After that, we can choose between add fields to the billing form:

$address_fields = apply_filters('woocommerce_billing_fields', $address_fields);

Or to the shipping:

$address_fields = apply_filters('woocommerce_shipping_fields', $address_fields);

Adding the desired elements to the class checkout_fields:

$this->checkout_fields('billing') = $woocommerce->countries->get_address_fields( $this->get_value('billing_country'), 'billing_' );
$this->checkout_fields('shipping')= $woocommerce->countries->get_address_fields( $this->get_value('shipping_country'), 'shipping_' );
$this->checkout_fields('account') = array(
 'account_username' => array(
  'type' => 'text',
  'label' => __('Account username', 'woocommerce'),
  'placeholder' => _x('Username', 'placeholder', 'woocommerce')
  ),
 'account_password' => array(
  'type' => 'password',
  'label' => __('Account password', 'woocommerce'),
  'placeholder' => _x('Password', 'placeholder', 'woocommerce'),
  'class' => array('form-row-first')
  ),
 'account_password-2' => array(
  'type' => 'password',
  'label' => __('Account password', 'woocommerce'),
  'placeholder' => _x('Password', 'placeholder', 'woocommerce'),
  'class' => array('form-row-last'),
  'label_class' => array('hidden')
  )
 );
$this->checkout_fields('order')  = array(
 'order_comments' => array(
  'type' => 'textarea',
  'class' => array('notes'),
  'label' => __('Order Notes', 'woocommerce'),
  'placeholder' => _x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')
  )
 );

And at the end, we pass the matrix through the filter that we indicated:

$this->checkout_fields = apply_filters('woocommerce_checkout_fields', $this->checkout_fields);

Naturally, we can also change the properties of existing fields. For example, let’s change the placeholder (text that appears within a field just before we write in it) and the label (public name of the field) of order_comments:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
  $fields('order')('order_comments')('placeholder') = 'Escribe aquí tus comentarios para el mensajero';
  $fields('order')('order_comments')('label') = 'Detalles';
  return $fields;
}

And if we want to delete a field, we apply one set:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
  unset($fields('order')('order_comments'));

  return $fields;
}

If you wish to see other examples as well as the data that passes by default WooCommerce to each of the two forms, we recommend reading it in the official documentation.

Have you managed to solve your problem? Tell us!