Looking for ways to customize your checkout? Learn how to edit WooCommerce checkout fields step-by-step.

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 edit WooCommerce checkout fields. This last step of the funnel is when the user finally buys so it must be optimized. Depending on your audience, the products or services that you offer, 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 excellent field editor 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 a 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 easily and practically, 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; 
}

Even though this could look a bit complicated for beginners, 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; 
}

Finally, if you’re new to the WooCommerce world, you must check the documentation. It will give you a better idea of the functions they use and it’ll be easier to understand. For more information about WooCommerce checkout hooks and how to use them, check out this complete guide.

Conclusion

All in all, to increase your conversions, it’s important that you customize your checkout page. That’s why you should have the flexibility to edit and remove checkout fields and improve the buyers’ experience. To do this, you can use the WooCommerce Checkout Manager plugin, PHP hooks, or PHP scripts.

Are you looking for other ways to customize your checkout page? Have a look at our guides: 

• How to remove checkout fields?
• How to add custom fields to WooCommerce checkout?

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.