How to customize WooCommerce checkout page?

The checkout page is one of the most important steps in the purchase process. So, if you have an online store, it’s key that you customize it and optimize it to increase conversion rates. There are several ways to do that. In this guide, we’ll show you 2 different methods to customize the WooCommerce checkout page: with plugins and programmatically.

Why should you customize the checkout page in WooCommerce?

If you have a WooCommerce store, the checkout is one of the most crucial pages in your shop. It’s where the customer pays and you close the sale. Considering how many shoppers abandon their carts and how much competition there’s nowadays, the checkout must be optimized to close as many sales as possible.

Even though WooCommerce includes a good default configuration, you may need to customize the checkout page to increase conversion rates on your store. We have previously seen how to customize the shop page and how to remove fields from the checkout, and today we’ll show you 2 different ways to customize the checkout page in WooCommerce.

Customize the WooCommerce checkout page: 2 Methods

In this guide you will learn how to customize the checkout page in WooCommerce in 2 different ways:

  1. With a plugin
  2. Programmatically (coding)

1) Customize the checkout page with a plugin

If you don’t have coding skills, you can customize the WooCommerce checkout page with a plugin. There are many options out there but for this tutorial, we’ll use WooCommerce Checkout Manager.

This plugin has been in the market for a couple of years and has more than 70,000 active downloads. It has a free version with basic but powerful functionalities and 3 premium plans with more advanced features that start at 20 USD (one-time payment). Let’s have a look at what this tool can do.

customize WooCommerce checkout page - WooCommerce Checkout Manager main

WooCommerce Checkout Manager

Checkout Manager is one of the best plugins to manage your checkout page. It allows you to add, customize, and delete fields on the checkout page to boost your sales. And the best part is that it’s very easy to use.

For example, you can add shipping, billing, and additional fields to the checkout page by simply enabling the options from the menu. The tool allows you to add or hide the first and last name, company name, country, city, zip code, address, phone number, email, and many other fields that you can create.

To do this, on your WordPress dashboard go to WooCommerce > Checkout and then the Billing, Shipping, or Additional tab. There, you will see a list of all the fields that you want to display or hide.

customize woocommerce checkout page - Checkout manager plugin

Besides, adding or hiding fields, you can also customize the WooCommerce checkout page by creating conditional fields to improve user experience. You simply need to select the conditional parent field and value. Additionally, you can add fixed or percentage fees to any core or conditional fields.

One of the most interesting features of the WooCommerce Checkout Manager plugin is the possibility to let shoppers upload any type of file during the purchase process. This is very useful when you book a hotel or rent a car online and have to upload your ID or driver’s license. You can also edit those files and let the users manage their files in case they need to provide additional documents.

All in all, if you want to easily customize the checkout page, WooCommerce Checkout Manager is a great choice. The free version is a great start so you don’t even need to spend any money.

2) Customize the checkout page programmatically (coding)

In this section, we’ll show you how to customize the WooCommerce checkout page via coding. So, by the end of it, you’ll know how to:

  1. Add custom fields to the WooCommcerce checkout page
  2. Save custom fields to the database
  3. Add content to the checkout page
  4. Use shortcodes in the WooCommerce checkout page
  5. Style the checkout page with custom CSS

To achieve all these customizations, you will use some WooCommerce checkout hooks. If you’re not familiar with hooks, we recommend you check out our starter guide on how to use WooCommerce hooks.

As we’ll apply some changes to the functions.php file, we recommend you use a child theme. You can either use one of the many child theme plugins or create one following this guide.

2.1) Add custom fields to the WooCommerce checkout page

The first thing we’ll show you is how to add custom fields to the checkout page. To do this, paste the following script in the functions.php file of the child theme:

// checkbox field
add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );

function quadlayers_subscribe_checkout( $checkout ) {
woocommerce_form_field( 'subscriber', array(
'type' => 'checkbox',
//'required' => true,
'class' => array('custom-field form-row-wide'),
'label' => ' Subscribe to our newsletter.'
), $checkout->get_value( 'subscriber' ) );
}

This will add a custom checkbox field at the end of the checkout page to give users the option to subscribe to your newsletter.

In the same way, you can add any field type. For example, let’s add a radio input field type with the following script:

// Radio input field
add_action('woocommerce_before_order_notes', 'quadlayers_radio_checkout');
function quadlayers_radio_checkout($checkout3){
woocommerce_form_field( 'feed', array(
'type' => 'radio',
//'required' => true,
'class' => array('custom-field form-row-wide'),
'label' => ' How did you find us?.',
'options' => array(
'Google' => 'Google',
'Friend' => 'Friend',
'Facebook' => 'Facebook',
'Youtube' => 'YoutTube',
'Other' => 'Other'
)
));
}

This will add a radio input type so you can ask your customers about where they heard about you.

Add custom fields to woocommerce checkout page

For more information about how to add custom fields to the WooCommerce checkout page, check out this complete guide with several examples.

2.2) Save custom fields values to database

Now, let’s see how you can use these custom fields to edit the checkout and gather information about WooCommerce orders. To do this, you need to be able to retrieve the values of the custom fields whenever you need to. Additionally, you need to save the values of the custom fields in the database once the customers complete the form and hit the Place order button.

To achieve this, you have to use the 'woocommerce_checkout_update_order_meta'hook. So, to update the two custom fields you added in step 2.1, copy and paste the following code in the child theme funcitons.php file:

add_action( 'woocommerce_checkout_update_order_meta','quadlayers_save_function' );
function quadlayers_save_function( $order_id ){
if ( ! empty( $_POST['subscriber'] ) ) {
update_post_meta( $order_id, 'subscriber', sanitize_text_field( $_POST['subscriber'] ) );
}
if ( ! empty( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}
}

This script checks if the custom field is empty or not with an if()conditional before saving it to the database.

After adding this script, you can retrieve the saved data from the database using a global “$post” WP object.

In the following script, we get the subscriber metadata of the current order. You can use this in the backend of the WooCommcerce orders list.

global $post;
$order = wc_get_order( $post->ID );
$c_meta = $order->get_meta('subscriber');

It’s worth noting that this is a raw script, so you will have to adapt it to fit your specific needs.

2.3) Add content to the checkout page

Another way to customize the WooCommerce checkout page is by adding some content. With a solid knowledge of WC checkout hooks, you can easily insert any kind of content such as images, titles, text, and so on wherever you want.

For example, you can use this script to add a trust badge image before the Place order button on the checkout page:

add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content');
function quadlayers_checkout_content(){
echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />;
}

add trust badges to woocommerce checkout page

Apart from images, you can also add a simple header text at the top of the checkout:

add_action(woocommerce_checkout_before_customer_details
,'quadlayers_checkout_header');
function quadlayers_checkout_header(){
echo "<h2>This is a custom Header<h2>
";
}

2.4) Use shortcodes in the WooCommerce checkout page

WooCommerce shortcodes give you a lot of flexibility and allow you to add any type of content using checkout hooks. However, if you simply print the shortcode, it won’t work. Instead, you should include them as follows:

echo do_shortcode('

Your cart is currently empty.

Return to shop

');

So, using a hook the same way you did in previous examples, you can end up with something like this:

add_action('woocommerce_after_checkout_form','quadlayers_checkout_shortcode');
function quadlayers_checkout_shortcode(){
echo do_shortcode('

Your cart is currently empty.

Return to shop

'); }

This script will bring the

Your cart is currently empty.

Return to shop

shortcode into action, displaying the WooCommerce cart at the bottom of the checkout page.

Add shortcode support to the WC checkout page

Please note that you can use any WordPress, WooCommerce, or custom shortcode. However, some shortcodes might not be compatible or supported by WooCommerce so check that before using them. To know more about shortcodes, you can check out our complete WooCommerce shortcodes guide.

2.5) Edit the WooCommerce checkout page with custom CSS

Finally, you can also customize the checkout page of your WooCommerce store by editing the CSS style. This doesn’t mean that you need to spend hours rebuilding the whole checkout page. Even a couple of simple changes can help you optimize the checkout.

For example, by editing the colors, fonts, margins, or borders, you can see some great improvements in conversion rates. There’s no magic formula that works for every business here and you’ll need to test different styles but adjusting a few things can help you boost your sales.

For example, you can use this simple script to apply a custom CSS style and customize the background color on the checkout page:

add_action('wp_head','quadlayers_checkout_style');

function quadlayers_checkout_style(){
         if(is_checkout()==true){

                 echo '<style> body{background:#dfdfff!important;}<style>';
         }
}

On top of that, you can take this script as a base and add your own CSS rules inside the HTML tag to give it the perfect look and feel for your site.

This is a quick hack to apply CSS to the checkout page. It’s very handy to add small pieces of CSS. But if you want more extensive style scripts, you should enqueue the CSS style the WordPress way, using the wp_enqueue_style() native WP hook as follows:

add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );

function quadlayers_enqueue_css(){    
    wp_enqueue_style(  'checkout_style',
        get_stylesheet_directory_uri() . '/checkout-style.css'
    );
}

This way, you can have all your custom CSS in a separate file (checkout-style.css in this example) which will be stored in your child theme folder at the same level as the main style.css file.

These are just a few examples of how you can customize the checkout page in WooCommerce with some simple scripts. We recommend you take them as a base and play around to add or edit any other aspects of your checkout.

Additionally, if you want to edit the shop page via coding, we recommend you have a look at our guide on how to customize the WooCommerce shop page programmatically.

Conclusion

All in all, customizing the checkout page can make a great difference and help you take your WooCommerce store to the next level. Even with a few changes, you can increase conversion rates and boost your sales.

In this guide, we’ve shown you two ways to edit the checkout:

  • With a plugin
  • Programmatically (via coding)

If you don’t have coding skills but want an easy yet solid solution, WooCommerce Checkout Manager is your best choice. This freemium plugin has very powerful functionalities to edit the checkout page and it’s very easy to use.

On the other hand, if you want to create your own solution via some coding and you don’t want to install any plugins, you can customize the checkout page programmatically. We’ve shown you five different examples to edit different aspects of the checkout but the options are endless. Play around with the scripts and unleash your creativity to optimize your checkout.

If you want to shorten the checkout process to improve conversion rates, we recommend you use a quick buy plugin for WooCommerce or direct checkout links. Finally, if you want to learn different options to also customize the shop page on your store, we recommend you have a look at this step-by-step guide.

Do you have any questions or want to share with us checkout customizations that have you applied to your site? Let us know in the comments section below! We’ll be happy to hear from you!