How do you add a NIF or CIF field to WooCommerce 2.0?

In How do you configure VAT for the Canary Islands, Ceuta and Melilla in WooCommerce 2.0? we already promised you that we would explain how to add a NIF/CIF field to WooCommerce easily and simply, and although at first sight it may look as though it is neither easy nor simple, the truth is that it is, as long as we carry out all the steps we state for you below. Although around the Internet there are several partial solutions that are more or less effective, we have not found a complete one, so APG offers you the definitive solution for adding the NIF/CIF field to WooCommerce. As almost always when we get stuck into this kind of job, we have to modify the functions.php file of our WordPress child theme, and this time was not going to be any different. So we are going to explain one by one all the things that have to be added to the functions.php file. In the first place we are going to physically create the fields we need, we are going to lay them out and arrange them correctly for their entry, both in the shipping form and in the billing form, and we will also add the Email Address and Phone fields to the form with the shipping details:

Note that if we want it to come out correctly translated into each language we support in our shop, we recommend that you put the Spanish texts that appear in the label and placeholder options into English and translate the texts for each language. For that we can use a plugin such as CodeStyling Localization. The problem with this is that every time WooCommerce is updated we will lose all the modifications we have made to the translation files, which is why we have preferred to leave it in Spanish. Another thing that has to be taken into account is the class option, which can take 3 possible values:

• form-row-wide: will make the field take up the whole of the width available in the form.
• form-row-first: will make the field take up the first half of the width available in the form.
• form-row-last: will make the field take up the second half of the width available in the form.

The class option can also adopt the value update_totals_on_change, which we use to force the calculation of the shipping total, just as we explain in How do you force the order total to update in WooCommerce?. So we will have to play with these values so that our new field is embedded appropriately in our form. Also, as you can see, in our particular case we have modified the Company Name field and the Town / City field so that they adopt the form-row-first class and the State / County field so that it adopts the form-row-last class. You may have to customise this depending on the needs of your forms. Now we carry on by adding the new field to the forms with the billing and shipping details; we must also alter the default address format and the one specific to our language so that the new NIF/CIF field is shown throughout WooCommerce:

If you use more languages, you will only have to go on adding them in the last function, altering its specific format so that it includes the field we have just created in the previous function. We now have almost everything ready. Now we are going to alter the form with the shipping details so that the newly added Email Address and Phone fields are shown as they should be. We are also going to fix a problem we have detected in the Postcode / Zip field, both in the form with the shipping details and in the form with the billing details. For that we are going to include these functions:

In our case we have made only the Phone field required, although you can modify the required option by stating true or false as you need it. The forms and addresses that appear in Users and in WooCommerce -> Order Details, both in the administration panel of our WordPress, also have to be modified. We are going to achieve it by adding these three new functions:

Thanks to them we will add the NIF/CIF fields, as well as the telephone and email address in the shipping address. Lastly, the new NIF/CIF field has to be added to the addresses that appear in My Account -> Edit My Address.

So that you do not get into a muddle, we are going to give you the whole code together, which is the one you have to add to your functions.php file:

With this, everything is now finished, configured and working perfectly normally. If you want to see all this code in action, you can do so in the Herves-Vida online shop. We hope that, as always, you find this solution useful and that, in the event that you come across any kind of problem or error, you let us know, as well as your comments about this tutorial.

Update: We have slightly modified the code to repair a couple of errors we have detected and to add the new fields to the addresses in Users and Edit My Address. We have also detected that some PHP errors and warnings were being caused in the online shop, so we have modified the code to prevent any kind of error or warning from appearing. We fixed a problem with the placeholder attribute of the Postcode / Zip field, we simplified the code even further and we added the new fields to the addresses in Order details. We also updated the screenshot. We force the order to update when the state or province and/or the postcode is changed, in order to provide a solution to a WooCommerce error detected by Raquel.