How to edit WooCommerce checkout fields

In order to have a successful eCommerce store, not only do you need to get the best plugins and the right themes for your site but also customize the WooCommerce checkout fields. This last step of the funnel is when the user finally buys so it’s very important that it’s optimized. Depending on your audience, the products or services that you offer and your branding philosophy, you have to adapt your checkout page to provide your users with the best buying experience.

For that, you’ll need to adjust remove or add fields/buttons, change text, and so on.

Today we’ll have a look at two different ways to edit WooCommerce checkout fields: using a plugin and using hooks.

Edit WooCommerce checkout fields using a plugin

If you want to optimize your site and increase your sales, WooCommerce checkout manager is one of the best options out there.

This plugin lets you add or remove fields, re-order them, and make them optional or mandatory, and has a user-friendly interface. And the best part is that it’s free!

Additionally, it offers advanced features that are hard to find in other plugins such as the possibility to upload files, create conditional logic for showing or hiding fields, and showing the payment method that customers normally use.

WooCommerce checkout manager comes with its own text/Html editor and custom CSS box editor that makes the whole process of changing text fields super easy.

All in all, if you want to edit your WooCommerce checkout page in an easy and practical way, this plugin is an excellent option.

However, there’s also another way to do it: coding and using PHP hooks.

Edit WooCommerce checkout fields with PHP hooks

When you install a plugin, the code of your website gets larger and more complex. This increases the chances of something breaking so you don’t want to have complex lines of code that you don’t need. For this reason, a custom script is the best method if you only need one single modification.

In this case, we’ll use the WooCommerce_checkout_fields hook:

add_filter( 'woocommerce_checkout_fields' , 'quadlayers_checkout_fields' );

Then, we’re ready to create a function to edit any field of the WooCommerce checkout page.

Remove fields

function quadlayers_checkout_fields( $fields ) {      

unset($fields['order']['order_comments']);     

return $fields; 

}

Edit placeholder of a field

function quadlayers_checkout_fields( $fields ) { 

     $fields['order']['order_comments']['placeholder'] = 'My new placeholder';      

     return $fields; 

}

Edit label of a field

function quadlayers_checkout_fields( $fields ) { 

     $fields['order']['order_comments']['placeholder'] = 'My new placeholder';      

     $fields['order']['order_comments']['label'] = 'My new label';      

     return $fields; 

}

This could look a bit complicated for beginners but the truth is that it’s not hard at all once you understand how it works. The woocommerce_checkout_field filter hook takes an array with the fields you want to edit and its new value. You can have a look at all the fields available in the array in the WooCommerce documentation.

Make a field optional

To make a field optional, we’ll use a different hook. In this example, we’ll set the address_1 field as optional. The ‘woocommerce_default_address_fields’ is applied to all billing and shipping default fields:

add_filter( 'woocommerce_default_address_fields' , 'quadlayers_default_address_fields' ); 

function quadlayers_default_address_fields( $address_fields ) {      

$address_fields['address_1']['required'] = false;      

return $address_fields; 

}

If you’re taking your first steps in coding or you’re new to the WooCommerce world, it’s important that you check the documentation to have a better idea of the functions and the logic they use.

Have you tried some of these techniques to edit your WooCommerce checkout page? Do you use a different one? Leave a comment below and share your experience with us.