How to Create a Custom WooCommerce Checkout Page

By /

WooCommerce is a free, open-source eCommerce WordPress plugin. It is free to download and use. With WooCommerce plugin anybody can easily set up their store. The most important thing is setting up store is the checkout page. The smooth and customized checkout experience will drive more traffic and conversions. In this guide we will learn how to create a custom checkout page .You will learn how you can add a custom field in checkout page. How can you add validations for it. How to add custom css changes.We will also learn how to reorder or remove checkout fields. After going through this guide you will get familiar how to customize WooCommerce checkout page .

Prerequisites

1.Wordpress and PHP coding knowledge

2.Woocommerce working knowledge

Step 1: Create a child theme

The very first thing to customize checkout page is to backup your site.This will ensure that there will be no loss of customization if theme is upgraded.So create a child theme if not present. Go to wp-content/themes folder.Create a child folder your-theme-child . Now add 2 files to it.One is the style.css and other one is functions.php In style.css add below code

/*
Theme Name: Your Theme Child
Template: your-theme
*/

In functions.php add the below code:

<?php
function custom_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'custom_theme_enqueue_styles');

Activate the child theme under Appearance>Themes .

Step 2: Create a WooCommerce folder with checkout file

WooCommerce uses template files to control the look and feel of the chekout page.To modify the checkout page you need to create woocommerce folder inside child theme.Then you need to copy form-checkout.php page from plugins/woocommerce/ folder to here.In this way you can modify any template of WooCommerce.

Now woocommerce will use this template file instaed of using from plugin/woocommerce directly.

Step 3: Create custom field and add validation

To creae custom fields in checkout page we need to add some code to functiona.php page.Basically WooCommerce use hooks and filters to override default functionality. So I will be using some filter hook with priority to override default functionality of adding custom field.

Add the below code in functions.php to create a custom field Order Notes.Check the code below:

add_filter('woocommerce_checkout_fields', 'custom_checkout_field');

function custom_checkout_field($fields) {
    $fields['order']['order_notes'] = array(
        'type' => 'textarea',
        'label' => __('Custom Order Notes', 'woocommerce'),
        'placeholder' => __('Please enter your notes...'),
        'required' => false,
        'class' => array('form-row-wide'),
        'clear' => true,
    );
    return $fields;
}

In the above code with filter hook woocommerce_checkout_fields custom function custom_checkout_field is hooked so that new field will be added.This code above adds a textarea field for Order Notes.

To validate order notes field add the below code:

add_action('woocommerce_checkout_process', 'custom_order_notes_validation');

function custom_order_notes_validation() {
    if (empty($_POST['order_notes'])) {
        wc_add_notice(__('Please enter order notes below.'), 'error');
    }
}

In the above code whenever action hook woocommerce_checkout_process will run ,with that the custom function custom_order_notes_validation will also run and will validate order notes field. The action hook woocommerce_checkout_process runs when user processes the checkout page.

wc_add_notice is used to add notice on top of page if validation fails .

Step 4: Remove a checkout field

Suppose we have billing_company field and we want it to remove.So we can achieve this by below code:

add_filter('woocommerce_checkout_fields', 'customize_checkout_fields');

function customize_checkout_fields($fields) {
    // Remove company name field
    unset($fields['billing']['billing_company']);
    return $fields;
}

Step 5: Reorder checkout billing fields

If we want to reorder billing fields we can achieve this by below code :

add_filter('woocommerce_checkout_fields', 'customize_checkout_fields');

function customize_checkout_fields($fields) {
      // Reorder the fields
    $fields['billing']['billing_first_name']['priority'] = 10;
    $fields['billing']['billing_last_name']['priority'] = 20;
    $fields['billing']['billing_address_1']['priority'] = 30;
    $fields['billing']['billing_address_2']['priority'] = 40;

    return $fields;
}

In the above code filter hook donot change the functionality but filters the content.It changes the priority of the fields above.So the fields will be displayed accordingly to priority.

Step 6: Add custom css to checkout field

If we want to add custom css then open child-theme/style.css and add the below code :

/* Style for the custom order notes field */
#order_notes_field {
    background-color: #f9f9f9;
    padding: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

/* Align the address fields */
#billing_address_1_field,
#billing_address_2_field {
    width: 45%;
    display: inline-block;
    margin-right: 1%;
}

So you learned here how to customize WooCommerce checkout page by adding ,removing and reordering the fields. Similary you can customize any other page in woocommerce as per your requirement.

Happy Coding !

Scroll to Top