WooCommerce, how to customize the Checkout fields?

Those who use the WooCommerce platform and want to customize the Checkout fields have two chances.

The first method is to act on the code inside a plugin or a child theme but you need to know programming. The second chance, used by most users, is to use a plugin developed specifically to make the operation simple, quick and automatic.

Basically, with a dedicated plugin you don’t have to do anything except rely on this tool. Add, remove, show, hide this or that field. Everyone has their own needs and anyone looking for quick and easy solutions to customize WooCommerce Checkout fields.

Above all, look for solutions that do not conflict with the child theme as, unfortunately, happens with many free plugins. Among many plug-ins, more or less effective, we tested “Custom checkout fields for WooCommerce” by NS Themes which solved our problems. In this guide, we explain how to customize WooCommerce Checkout fields with both methods.

The choice is yours!

WooCommerce: how to customize Checkout fields, when it is important to do so

The WooCommerce Checkout page is crucial for bidding within your store.

This is where you will receive payments, so it is essential to set up the page according to your needs and in the best way possible. The default configuration is quite good but, often, those who have an e-commerce feel the need to customize the page to make it more functional, more attractive or, perhaps, to hope to achieve a higher conversion rate.

How to do? Those who know the programming language can make changes by adding individual filters.

However, those who are fasting programming and want to significantly change the Checkout page prefer to rely on a plugin designed specifically to perform this operation automatically.

Let’s start with the code modification recommended only to the most experienced. Intervening directly on the CSS code is a complex operation.

Those who want to try to do this will have to remember to absolutely save the backup copies of the code: in this way, it will be possible to recover them to restore the initial situation (before the changes).

Change the WooCommerce Checkout fields by changing the CSS code

We advise those who are not programming experts to skip this paragraph for a simple reason: to avoid wasting time unnecessarily risking disasters.

For curious developers, Actions and Filters are available to customize the WooCommerce Checkout fields.

Using the woocommerce_checkout_fields filter it is possible to interact with any predefined field from the Woocommerce core. The fields are related to billing, shipping, account and order (i.e. billing, shipping, account a order) with their subcategories.

Each field contains an array of properties (type, label, placeholder, class, required, clear, label-class, options).

Create a new field

Let’s take a simple example for those wishing to create a new field in the section dedicated to the billing address.In your child theme’s functions.php you can add the field with woocommerce_checkout_fields as follows: add_filter (‘woocommerce_checkout_fields’, ‘sam_random_field’);function sam_random_field ($ fields) {$ fields [‘billing’] [‘billing_rand’] = [‘label’ => ‘Random field’,’type’ => ‘text’,’class’ => [‘form-row-wide’],’priority’ => 5,’required’ => true];return $ fields;}

Add the VAT and PEC fields

Another example shows how to add the VAT and PEC fields by working on the code to be inserted within the functions.php in the folder of the theme to be developed:

add_filter ('woocommerce_billing_fields', 'sam_piva_pec_fields');

function sam_piva_pec_fields ($fields){

$fields ['billing_partita_iva'] = [ 'label' => __ ('VAT number', 'sam-text'), 'class' => ['form-row-first'], 'placeholder' => __ ('IT-XXXXXXXXXXX', 'sam-text'), 'type' => 'text', 'priority' => 35, ];

$fields ['billing_pec'] = [ 'label' => __ ('PEC', 'sam-text'), 'class' => ['form-row-last'], 'type' => 'email', 'validate' => ['email'], 'priority' => 35, ];

return $fields;

}

Remove fields you don’t need

In addition to adding fields, you can also remove fields you don’t need.

For example, here’s how to remove the phone and postcode fields in the billing address:
add_action ('woocommerce_checkout_fields', 'sam_remove_fields');
function sam_remove_fields ($fields) {
// Billing fields.
unset ($fields ['billing'] ['billing_postcode']);
unset ($fields ['billing'] ['billing_phone']);
return $fields;
}
Anyone who is not a programmer would do well to skip this paragraph to avoid sudden headaches.

How to customize Checkout fields effortlessly with a plugin

In addition to the risk of not proceeding correctly when you want to intervene in the code, in some cases it is impossible to modify some aspects of the fields present. For example, the subcategory billing_address_1.

WooCommerce defaults to predefined fields to be filled in by users during the payment phase: it does not provide for the possibility of intervening on these fields directly from the general settings.

To modify the WooCommerce Checkout without having to intervene on any php files there is a simple, quick and effective way.

If you do not want (or are not able) to open your functions.php or to create a functional plugin to modify the Checkout fields, there are plugins designed ad hoc that solve the problem.

Among many, we chose one and tried it.The most important section for a WooCommerce online store is the checkout page field. We wanted to try NS Themes’ Custom checkout fields for WooCommerce plugin.It is a tool that allows you to show / hide the field on the WooCommerce payment page.

The page option appears in the WordPress backend menu: from here you can choose whether to show or hide each individual file.

This plugin, for example, helped us to add a VAT field on the payment page.Basically, just select the box you want to hide or show and save it. This will be done automatically by the “Custom checkout fields for WooCommerce” plugin.

This plugin offers the following functions:- add custom field;- mark the required field;- customize the placeholder text;- sort the field and replace the label of each field.To use the plugin, look at the following requirements: WordPress 4.3+ WooCommerce 2.5.0+ PHP5.3 +.