The checkout page on your online eCommerce shop is where you get paid, so it’s an important page for your online eCommerce business. WooCommerce the default configuration is so good, but you may need to customize it out of necessity. Like you may add extra user billing fields or your extra a few the important fields. So today, I will show you How to Customize the WooCommerce Checkout Page Step by Step Guide. There are two ways to customize the page. First with a plugin and with custom code.

Most customizations would be done using hooks and filters. Look at the WooCommerce documentation and you can copy the checkout template to your website theme by in a folder look like this: woocommerce/checkout/form-checkout.php.

Read WooCommerce Action and Filter Hook Reference

WooCommerce Checkout Page by default

This is WooCommerce the default checkout page:

WooCommerce Checkout Page by default

This method adds the custom field to the checkout page using the PHP code. First, you need to perform an action you activate theme the functions.php file, then I will use this code to start customizing the checkout page:

<?php
/**
 * Add the field to the checkout page
 */
add_action('woocommerce_after_order_notes', 'customise_checkout_field');

function customise_checkout_field($checkout)
{
	echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';
	woocommerce_form_field('customised_field_name', array(
		'type' => 'text',
		'class' => array(
			'my-field-class form-row-wide'
		) ,
		'label' => __('Customise Additional Field') ,
		'placeholder' => __('Guidence') ,
		'required' => true,
	) , $checkout->get_value('customised_field_name'));
	echo '</div>';
}

After adding this code, the checkout page looks like as :

WooCommerce-Check-Out-Page

For the data validation of the custom field using the following code:

<?php
/**
 * Checkout Process
 */

add_action('woocommerce_checkout_process', 'customise_checkout_field_process');

function customise_checkout_field_process()
{
	// if the field is set, if not then show an error message.
	if (!$_POST['customised_field_name']) wc_add_notice(__('Please enter value.') , 'error');
}

Now that I’ve added a replacement field to the checkout page. I would like to confirm that the details entered into the custom field by the client, is being saved or not. This could be using the code below:

<?php
/**
 * Update value of field
 */

add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');

function customise_checkout_field_update_order_meta($order_id)
{
	if (!empty($_POST['customised_field_name'])) {
		update_post_meta($order_id, 'Some Field', sanitize_text_field($_POST['customised_field_name']));
	}
}

After saving the code, we have added custom fields to our WooCommerce Website.

Customizing Shipping Form In WooCommerce Checkout Page

To customize WooCommerce checkout fields, WooCommerce offers several filters and hooks that deal with major groups of fields on the page. Especially, these filters include woocommerce_checkout_fields (checkout fields), woocommerce_billing_fields ( billing fields), and woocommerce_shipping_fields (shipping fields).

Now for this tutorial, I will work with woocommerce_checkout_fields filter. The good news that I will try to cover both the addition and removal fields.

Remove Fields From the WooCommerce Checkout Page

WooCommerce-Checkout-Page-Address

Just an example, I will try to demonstrate how to remove the First name and the Last name fields. Here the code:

add_filter( 'woocommerce_checkout_fields' , 'custom_fields_woocommerce' );
 
function custom_fields_woocommerce( $fields ) {
    unset($fields['shipping']['shipping_first_name']);
    unset($fields['shipping']['shipping_last_name']);

    return $fields;
}

In the raised code snippet, you will see the function custom_fields_woocommerce. And in this function takes the argument $fields that take the checkout fields that need to be removed or unset. So, I have unset the first name and the last name.

Here check Please:

WooCommerce-Checkout-Page

Add Fields to the WooCommerce Checkout Page

Add this the following code snippet:

add_filter( 'woocommerce_checkout_fields' , 'woocommerce_checkout_field_editor' );

// Our hooked in function - $fields is passed via the filter!
function woocommerce_checkout_field_editor( $fields ) {
    $fields['shipping']['shipping_field_value'] = array(
        'label'     => __('Field Value', 'woocommerce'),
        'placeholder'   => _x('Field Value', 'placeholder', 'woocommerce'),
        'required'  => true
    );

    return $fields;
}

The raised code snippet contains both labels and placeholders for the new fields. Now, there are requirements to set some fields essential. This is taken care of by the required argument that is set to TRUE.

Display Field Value at the WooCommerce Order Page

The following code will display the value of the field on the order page. So, add the following code:

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'edit_woocommerce_checkout_page', 10, 1 );

function edit_woocommerce_checkout_page($order){
    global $post_id;
    $order = new WC_Order( $post_id );
    echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}

This code will display the field in the order page Looks like.

Display Field Value At The WooCommerce Order Page

In this post, I have mentioned, how to add custom fields in the WooCommerce checkout page. But now I going to customize the WooCommerce default checkout fields and the field modifications.

WooCommerce Default Checkout field

WooCommerce has provided all the required fields for your website checkout page. such as:

  • Billing details
  • First name
  • Last name
  • Company name
  • Country
  • Address
  • Town/City
  • District
  • Postcode/ZIP
  • Phone
  • Email address
  • Order notes

Customize checkout fields using code snippets

Code snippets are adjustable ways for the web developers and to customize WooCommerce checkout fields. Here’s a list of principal HTML tags with CSS classes and ID, that very easily you can use to customize the checkout page. Note: Add the custom CSS in your active theme or you can use a WordPress Custom CSS plugin.

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout">
<div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order">
<table class="woocommerce-checkout-review-order-table">
<div id="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order">

CSS Looks like the following example:

input[type="text"] {
 border: 1px solid #ddd !important;
 background-color: #222 !important;
}


Remove a checkout field

Now, I going to remove the default checkout fields using WooCommerce filter hook woocommerce_checkout_fields. So, you should do it very carefully. if possible then first, you should take website backup. However, add the following code in your active theme fucntions.php file or child theme fucntions.php file.

/**
 Remove all possible fields
 **/
function wc_remove_checkout_fields( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_email'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_first_name'] );
    unset( $fields['billing']['billing_last_name'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );

    // Shipping fields
    unset( $fields['shipping']['shipping_company'] );
    unset( $fields['shipping']['shipping_phone'] );
    unset( $fields['shipping']['shipping_state'] );
    unset( $fields['shipping']['shipping_first_name'] );
    unset( $fields['shipping']['shipping_last_name'] );
    unset( $fields['shipping']['shipping_address_1'] );
    unset( $fields['shipping']['shipping_address_2'] );
    unset( $fields['shipping']['shipping_city'] );
    unset( $fields['shipping']['shipping_postcode'] );

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

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );


Make a required field not required

Add the following code in your active theme fucntions.php file or child theme fucntions.php file.

add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');
function wc_unrequire_wc_phone_field( $fields ) {
$fields['billing_phone']['required'] = false;
return $fields;
}


Look $fields[‘billing_phone’][‘required’] = false this code false, So, if you want your fields will be required, then change True.

Change input field labels and placeholders

Add the following code in your active theme fucntions.php file or child theme fucntions.php file.

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
 {
 unset($fields['billing']['billing_address_2']);
 $fields['billing']['billing_company']['placeholder'] = 'Your Business Name';
 $fields['billing']['billing_company']['label'] = 'Your Business Name';
 $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; 
 $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name';
 $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name';
 $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; 
 $fields['billing']['billing_last_name']['placeholder'] = 'Last Name';
 $fields['billing']['billing_email']['placeholder'] = 'Email Address ';
 $fields['billing']['billing_phone']['placeholder'] = 'Phone ';
 return $fields;
 }


I believe you understand how it works and I think you can do it now. It’s not as easy as you think, but if you make a little mistake, your website will show an error. So I think first of all you should better understand how it works and then start working. if you have any questions just comment below I will help you.

I don’t want to waste your time I guess you’re too busy so I’ll just tell you the name of some plugin that would be the best. I think you can work with the plugin yourself. If you have any problems then ask me.

Any eCommerce website checkout is a very important and functional page that asks for the useful information and then helps the visitor go through the sale.

I can make an eCommerce website or Dropshipping website using the WooCommerce plugin. So, if you need to help create a fully functional eCommerce website or dropshipping website or Affiliate Website, then please check the details of my services on Fiverr. To Check: Create an eCommerce Website With WooCommere

Topics