Customize Checkout Fields – WooCommerce

Customize Checkout Fields – WooCommerce

It is the first tutorial in the series about Checkout Fields and Order Custom Fields. We begin with WooCommerce checkout form customization.

 

WooCommerce just like WordPress has a lot of great actions and filters (sometimes you’ll understand that not enough, but it is ok). When working with filters you can change the only file –  functions.php and it will be enough (of course it would be better if this is the  functions.php of your child theme).

The main filter we will work today is  woocommerce_checkout_fields.

Introduction to woocommerce_checkout_fields

If you are here just because you want to remove some unnecessary checkout fields or because you would like to disable ZIP code validation, you can safely skip this step. But if you want to understand the whole process, you’re in the right place.

Ok, so, first of all open your WooCoommerce shop checkout. For me it looks like this.

After inserting this piece of code you will see the array of all checkout fields with the parameters instead of the checkout form. As you can see in array, these fields are sorted by groups:  billingshippingaccountorder.

And a specific field array looks like this:

Disable Zip Post Code, Phone Number and State Validation

Below is the validation.

Yes, in this post we will work mostly with  woocommerce_checkout_fields, but sometimes, when you have both billing and shipping fields in your checkout it is better to use  woocommerce_default_address_fieldsaction hook because it affects both shipping and billing fields at the same moment.

So, it will be easier to disable post code and state validation with it.

Well, but what is with the phone field? It is not included in the address fields array. We will use  woocommerce_checkout_fields to disable its validation.

Removing Default Checkout Fields

One day my client asked me to remove all the checkout fields except name, email and phone, because she wanted her customers to pay by cash when they come to her office to receive purchased products.

Removing fields is one of the most easiest steps in this tutorial. And here is how to do it:

I set 9999 priority to the hook because I want to run it as late as possible. Of course if you remove the checkout billing details, you shoudn’t hope that card payments will work for you. Of course they won’t. But if you would like to use PayPal Standard, everything should be ok.

After implementing the above code my checkout looks like this.

I set 9999 priority to the hook because I want to run it as late as possible. Of course if you remove the checkout billing details, you shoudn’t hope that card payments will work for you. Of course they won’t. But if you would like to use PayPal Standard, everything should be ok.

After implementing the above code my checkout looks like this.

Change Fields Order

If you read this post from the beginning, you remember that client asked me to place the email field before the phone. Actually it is not so simple as it seems but I will show you how.

That’s what I got at this moment:

But why this happened? Because it is not enough just to sort the fields array, you have to apply appropriate classes to each field as well.

Actually each checkout field has its own style (CSS class) depending on its position, there are 3 main classes:

  • form-row-first – half-width, first,
  • form-row-last – half-width, last,
  • form-row-wide – fullwidth.

Now we’ll make phone and email fields fullwidth with the code below.

Change Labels and Placeholders

Below you can find the code that allows to change the label of the billing first name field and the placeholder of the order notes field.

And the result:

Terms and Conditions Checkbox

And before you continue to the next step and begin creating this checkbox in the code, I want to show you a very simple and correct way to do it.

First — create your «Terms and conditions» page in Pages > Add New.
Second — go to WooCommerce > Settings > Checkout and set the page there.

WooCommerce > Settings > Checkout > Checkout Options

That’s all – after you select the page there and save changes the checkbox will appear on your checkout page just before the «Place Order» button.

Add Your Own Custom Checkout Fields

In this part of the post I will add two fields to the WooCommerce checkout form — a dropdown select just under the billing details and «Subscribe» checkbox to the order notes section. The first field will be a required field.

I will also try to describe this process in details.

First of all we should decide where we would like to place our new fields. And here is the choice:

  • woocommerce_before_checkout_billing_form
  • woocommerce_after_checkout_billing_form
  • woocommerce_before_checkout_registration_form
  • woocommerce_after_checkout_registration_form
  • woocommerce_before_checkout_shipping_form
  • woocommerce_after_checkout_shipping_form
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes

I think everything is clear from the names of locations — it is also the name of the action hook, we will use below. The field locations are also mentioned here in the same order as in the template code.

These locations may not work for you just in one case — if WooCommerce default checkout templates:  form-shipping.php and  form-billing.php were overridden in the theme. In that case you can manually add the new fields to your theme files,  /woocommerce/checkout directory.

The result:

After inserting the above code to your functions.php or to your custom plugin, the new fields will appear on the checkout page.

 

And after submitting the order you will see that the checkout field values appeared in the new order Custom Fields metabox.

If you can not find this metabox on the edit order page, turn it on in Screen Option tab which you can find on the top right part of the screen.

But what to do with the new checkout fields validation?  required parameter of the  woocommerce_form_field() just adds a  * symbol near the field label, but do not process the validation.

Making fields required / Custom Validation / Creating Custom Error Notices

This small piece of code prints the notice if the preferred contact method has not been not selected. As I said before, for a custom checkout field it is not enough just to set  required parameter to  true to make it really required.

Look at the second parameter of the  wp_add_notice function — it also supports «success» and «notice» notice types, but «error» is the only one what is relevant here.

 

If you have any question about this post comment below.. Enjoy…..

Guest Post By: Misha Rudrastyh

Md. Elias
elias1435@gmail.com
No Comments

Post A Comment