WooCommerce Checkout page, a plugin allows you to show / hide the field

The WooCommerce Checkout page offers ecommerce different inputs to gather buyer information. Often, the fields used by online stores do not coincide with the standard ones, predefined by WooCommerce. Do you also have an e-commerce and want to customize your WooCommerce Checkout page? There is a plugin that allows you to show / hide the field of your interest.

Perhaps, you would like to add the VAT number, Tax Code, PEC field or remove a field that you do not care about such as the ‘company name’.

With NS Themes “Custom checkout fields for WooCommerce” plugin you can edit, add, show or hide any field.

The other way to be able to customize the Checkout page is to intervene on the CSS code within a plugin or a child theme (developer stuff). If you do not know the programming language, the ad hoc plugin we will talk about is the only solution to modify the checkout page of your e-commerce as you wish.

In this guide, we will explain both methods in a simple way.

WooCommerce Checkout Page: Here is the plugin that allows you to show / hide the field

Most users prefer to use specific plugins to try to customize the WooCommerce checkout page, which is the most important section for an online store, that of payments. They look for solutions that do not conflict with the child theme. Too bad that many free plugins fail to please them.

“Custom checkout fields for WooCommerce” by NS Themes makes the operation fast, effective (without creating any conflicts), simple and automatic.

With this plugin you can add, remove, show and hide any field you want to customize. All this without intervening on any php files, without being forced to open the functions.php or create a functional plugin to manually modify the code.

“Custom checkout fields for WooCommerce” is an ad hoc plugin. Allows you to show / hide the fields on the WooCommerce payment page.

From the WordPress backend menu you will be able to choose whether to show or hide each file.

All you have to do is check the box you want to show or hide and save.

The “Custom checkout fields for WooCommerce” plugin will take care of the operation automatically.

With this tool you can add a custom field, edit the placeholder text, mark the required field, sort the field and replace the label of each field.

It is easy to use, fast and above all it does its job.

Customize the WooCommerce Checkout page by acting on the CSS code

WooCommerce defaults to standard, predefined fields that, during the payment phase, users must fill in. It does not allow you to intervene on these fields directly from the general settings. If it were possible, we would not need any special plugins or having to act on the code inside a plugin or a child theme.

Acting on the CSS code is a complex operation, difficult for those unfamiliar with the programming language.

Working with the theme / plugin code by modifying and overwriting some WooCommerce functions is recommended for the more experienced, for those who know programming.

It is good to save the backup copies of the code to be able to recover them by restoring the original situation.

With the use of the woocommerce_checkout_fields filter you can interact with any predefined Woocommerce field. The fields are related to invoicing, shipping, account and order (i.e. billing, shipping, account and order) with related subcategories. Each field contains an array of properties (type, label, placeholder, class, required, clear, label-class, options).

Billing field and Shipping field

Before giving you the code to insert to the theme’s functions.php file to add or remove fields to the WooCommerce Checkout, we remind you that the platform divides the fields into two categories:

– Billing field relating to the buyer’s personal data (name, surname, company name, address, city, post code, state, email and telephone);

– Shipping field concerning shipping data (name, surname, company name, address, city, postal code, state) to be filled in if the recipient of the purchased product is different from the buyer.

Remove / add fields in WooCommerce Checkout

We give you a couple of examples by acting in the Billing field category which concerns the personal data of the buyer.

For example, if you want to remove the billing-company field (company name) from the Checkout, here is the code:

 

add_filter (‘woocommerce_billing_fields’, ‘remove_billing_field’);

function remove_billing_field ($ fields) {

unset ($ fields [ ‘billing_company’]);

return $ fields;

}

If, on the other hand, you want to add the field to the Billing field section, here is the code to insert:

add_filter (‘woocommerce_billing_fields’, ‘add_billing_custom_field’);

function add_billing_custom_field ($ fields) {

$ fields [‘custom_field’] = array (

‘type’ => ‘text’,

‘label’ => __ (‘Custom Field’, ‘woocommerce’),

‘placeholder’ => _x (‘Custom Field’, ‘placeholder’, ‘woocommerce’),

‘required’ => true,

‘class’ => array (‘custom-class’),

‘show’ => true

);

return $ fields;

}

To add the field to the Shipping field section instead of the Billing fields section, you will need to replace woocommerce_billing_fields with woocommerce_shipping_fields.

Add a new field from the code

In addition to modifying or deleting a field, you can also modify the code to add a new field; for example, to enter a VAT number / tax code field at the billing address.

You need to add the following code in your theme’s functions.php file:

// Add the “VAT / Tax Code” field

add_filter (‘woocommerce_billing_fields’, function ($ fields) {

$ fields [‘billing_vat’] = array (

‘label’ => __ (‘Vat number / Tax code’, ‘woocommerce’),

‘placeholder’ => _x (‘Vat number / Tax code’, ‘placeholder’, ‘woocommerce’),

‘required’ => true,

‘class’ => array (‘form-row-wide’),

‘clear’ => true,

‘priority’ => 35

);

return $ fields;

});

We advise those who are not programming experts to avoid improvised ‘experiments’.

In addition to the risk of making mistakes, in some cases it is impossible to modify certain fields on WooCommerce by acting on the code.