How to customize the WooCommerce checkout page

Reading Time: 13 minutes

If you haven’t invested time yet to customize WooCommerce checkout page on your store, it can become a final hurdle stopping visitors becoming customers on your site. If it is confusing or complicated, it can deter potential buyers from completing their purchases. However, there are lots of ways you can tweak it, including different fields, a branded design, specialized payment methods, and product recommendations.

So, if you’re looking to customize WooCommerce Checkout pages, you’re in the right place. This guide runs through everything you need to know, including why it’s important, the different options at your disposal, and how exactly to do it.

Why you need to customize WooCommerce checkout page

Once you’ve done the work to get shoppers to the Checkout page, it may feel like you’ve won. You can take a break now, right? 

While, yes, getting someone to the Checkout page is a huge hurdle that you’ve overcome, you’re not guaranteed the sale. In fact, a complicated checkout setup can drive away nearly one in five shoppers. 

Customers are busy and they often have multiple options to choose from when it comes to making a purchase online. If they get frustrated, it simply makes sense that they’ll give up and go elsewhere.

Your goal, as a merchant, is to make the process as simple as possible to encourage shoppers to complete their order. 

Our WooCommerce automation guide covers some time-saving tricks to optimize your Checkout page. But conversions aren’t the only reason you might want to customize the WooCommerce Checkout page. Perhaps you want to make the page more accessible or mobile-friendly. Maybe you want to collect additional information about shoppers so you can better meet their needs or market to them in the future. Or you might want to edit the design of the page to fit with the overall look and feel of your WooCommerce store as a whole.

Whatever your motivations are, you’ve come to the right place to learn how to customize a WooCommerce Checkout page.

How to create a custom WooCommerce checkout experience

Not sure exactly what a custom checkout entails? Let’s look at a few ways you can make changes:

1. Edit checkout fields

WooCommerce automatically creates a Checkout page for new stores, which includes a set of default fields. And while the included WooCommerce checkout fields are ideal for the majority of stores, there are scenarios in which you might want to edit them.

For example, you might want to:

• Add a field to capture a customer’s birthday, so you can send them a card or special discount
• Remove the “company name” field if you solely run a B2C company
• Include a checkbox for gift wrapping if that’s something you offer
• Change the label of a field if the defaults don’t quite fit your store

WooCommerce provides a full guide to customizing checkout fields if you want more information.

2. Customize the look to match your brand 

You can also customize the design of your Checkout page to match your brand. In most cases, your theme will determine the overall look of the checkout experience, including the fonts, colors, layout, padding, and button design.

However, there may be scenarios where you want to make changes to the appearance of the page. You can adjust it to be more mobile-friendly or accessible. Or modify the buttons to stand out more from the rest of the content. 

There are a variety of ways you can do this, which we’ll explore in a bit.

3. Allow for specialized payment methods

WooCommerce gives you full control over the payment methods that you accept. You can add new methods via extensions, then include them on the Checkout page. 

There are extensions available for nearly every payment processor you can imagine — each of which accepts their own set of payment methods and currencies.

So this makes it simple to go beyond debit and credit cards. Remember: your goal is to make things as easy as possible for your customers, and part of that is offering the payment methods that they prefer, along with ones that speed up checkout.

With the right payment processors on WooCommerce, you can accept more than 135 currencies from around the world using methods from Apple Pay to Google Pay. You can even accept cryptocurrency and offer “buy now, pay later” solutions.

April Soderstrom, for example, offers multiple payment options, including credit and debit cards, PayPal, Google Pay, and even PayPal Pay in 4. 

4. Share important messages with customers

The Checkout page is the perfect place to display important messages to customers. It grabs their attention and is one last shot at conveying information. What sorts of messages might you display? Here are some examples:

• Shipping delays or notices
• Coupons, sales, or discount codes
• Nudges to increase their order and qualify for free shipping
• Notifications about order deadlines for holidays

Daelmans, for example, includes a box on the Checkout page with information about free shipping, secure payment options, and the size of their collection.

5. Make things easier for shoppers

The easier the checkout process, the more likely it is that people will complete their purchase. 

There are a variety of ways you can streamline the Checkout page, including removing unnecessary fields, creating a one-page experience, offering one-click payment options like Apple Pay, and keeping people on-site to make their purchase.

6. Encourage increased order values

The Checkout page is your final opportunity to connect with customers before they order. That also means that it’s a great place to share products and recommendations based on the items a shopper already has in their cart—as long as you don’t complicate the user experience. 

Amundsen Sports, lets customers add related products to their order directly on the Checkout page, with simple, easy-to-use checkboxes.

3 ways to customize the WooCommerce checkout page

There are a variety of ways you can customize your Checkout page, and the right option will depend on your skillset, experience level, and goals. Let’s look at three that could work for you:

1. Use WooComerce checkout blocks 
2. Use extensions and tools
3. Make manual customizations

1. Use WooCommerce checkout blocks

You can take advantage of checkout blocks whether you’re using a classic theme or a block theme. Let’s look at both!

Using a block theme

If you’re using a WordPress block theme, you can harness the power of the Site Editor to edit your Checkout page. This allows you to drag and drop elements into place and edit settings for each one without touching a line of code. 

All you need to do is go to Appearance → Editor → Templates in the WordPress dashboard and select the template you want to modify. In this case, you’ll choose Page: Checkout.

You’ll see that there are some blocks added by default, and you can easily edit each one. Let’s click on the Shipping Address block:

You’ll see options for customizing this content in the Settings menu on the right-hand side. There, you can toggle fields on and off, make them required, and more.

If you click on the “Place Order” button, you can change the text to whatever you’d like.

Of course, you can make changes to all the other blocks in the template as well. Plus, you can delete and rearrange them however you see fit to build a custom Checkout page.

What about adding blocks? No problem!

Click the blue + icon at the top left to open the Block Inserter. Find the block you want to add by scrolling through the options or using the search bar. Then, drag and drop it wherever you’d like. In this case, we’re going to insert On Sale Products block at the bottom of the page. 

This will add a grid of products that are currently on sale, giving shoppers the opportunity to add them to the cart before completing their purchase.

The full block library is at your disposal, so feel free to be creative! 

Editing the style and design of the Checkout page is simple, too. Select the Styles icon at the top right of the Site Editor (the half black, half white circle). There, you can apply preset styles, edit typography, switch colors, and more. Keep in mind, though, that these styles will apply across your entire site, not just on the Checkout page.

Using a classic theme

If you’re not using a block theme, you can still utilize Checkout blocks. While this doesn’t afford quite as much customization as the Site Editor, there are still some great options.

Start by opening the page to which you want to add checkout functionality. Perhaps this is a brand new Checkout page you’re creating, or maybe it’s a landing page for a product or new line of items.

Then, open the Block Inserter and search for the Checkout block. Add it to the page.

There, you can edit the blocks, add new ones, and remove ones you don’t want, just like the instructions in the section above.

If you want to assign this new page to be the default Checkout page, go to WooCommerce → Settings in your dashboard. 

Click the Advanced tab, and choose the new page in the dropdown next to Checkout page. Make sure to save your changes.

2. Use extensions and tools

There are lots of extensions, marketing plugins, and third-party tools that allow you to make any number of changes to your site, including the Checkout page. Here are some great options:

1. Checkout Field Editor

The default WooCommerce Checkout page includes common fields that apply to the majority of stores. But each business—and their audience—has unique needs, and there may be times that you want to customize the checkout form.

The Checkout Field Editor extension enables you to do this without having to work with code at all. You can add new fields, edit existing ones, move them around, and get rid of those you don’t need.

You can also go beyond simple text, adding select fields, checkboxes, and date pickers so you can collect the exact information you want.

2. Product Recommendations

The Product Recommendations extension allows you to add upsells, cross-sells, and recommendations directly to the Checkout page. You can create advanced rules to highlight top-rated products, offer curated “complete the look” groupings, suggest ways to qualify for free shipping and prioritize seasonal or sale items.

Not only can this increase your average order size, it also helps customers get everything they need to make the most of their purchase—think batteries, accessories, protection plans, and more.

3. Omnisend 

Finding new customers is hard work. So, once you have visitors on your site, you not only want to maximize conversions, but also increase the chances they’ll become repeat buyers (dramatically increasing their customer lifetime value). The Omnisend WooCommerce plugin offers tools for both. 

You can easily add powerful features throughout your site, including your checkout process. Among many other features, you can take advantage of:

• Exit intent forms: Grab shoppers’ attention when they start to leave the Checkout page with an exit intent form. You can offer a discount or other reward (like free shipping) in exchange for their email address or phone number, plus drive them to complete a purchase.
• Wheel of fortune forms: Gamification at its finest, a wheel of fortune form lets shoppers spin to earn discounts and other rewards in exchange for their email address. They’re a great way to capture information and incentivize a purchase with a discount.
• Email opt-in checkbox: Make it easy for buyers to join your email list by adding a checkbox to the Checkout page. 

And once you’ve added subscribers to your email or SMS list, you can automatically run powerful campaigns that are highly targeted to each individual. 

Design beautiful, branded emails. Build a welcome series, abandoned cart email, post-purchase campaign, and more. Create detailed segments based on subscriber behavior, past purchases, demographics… the sky’s truly the limit when you combine WooCommerce and Omnisend.

4. Tidio

Providing customer support directly on the Checkout page can be incredibly powerful. It provides you with the opportunity to overcome objections and answer questions when they matter the most.

With Tido, you can respond to customers in real time, even when you’re out of the office. See a list of the exact pages each shopper viewed, so you can customize responses to their specific needs. And if you’re not available for any reason, you can collect their email address and get back to them as soon as possible. Or, you can even use Tidio’s Chatbot tool to automate as many answers as possible.

Not only does Tidio integrate seamlessly with WooCommerce, it also connects with Omnisend so that you can better support shoppers all in one place.

5. WooCommerce One Page Checkout

A one page checkout process, of course, simplifies the entire flow for your customers. It reduces the number of steps they have to take, along with the likelihood that they’ll leave without buying.

With this extension, you can add Checkout fields alongside your products so that shoppers can add items to their cart, make modifications, and pay without having to leave the page.

6. Gift Wrapper for WooCommerce

If customers purchase your products as gifts, this is a great extension for your store. Thanks to this tool, shoppers can choose to add gift wrapping directly on the Checkout page. They can even choose from different designs and add messages for the recipient.

7. WooCommerce Order Delivery

This extension displays a date picker at checkout that allows shoppers to choose their preferred delivery date and time. This is particularly helpful for seasonal items (such as holiday gift boxes) and products with expiration dates (such as food that needs to be kept cold). 

But you can also use this strategy to have more control over the number of orders you need to fulfill in a given time period. 

8. Saved Addresses for WooCommerce

If you want to give customers the ability to save addresses, this is the extension for you. Shoppers can easily save billing and shipping addresses to their accounts, then select from them when checking out in the future.

This will speed up the checkout process for returning customers. Plus, it allows them to quickly switch between addresses for home, work, and gift recipients. 

9. NextSale

As we’ve already discussed, the Checkout page is an excellent opportunity to increase average order value. It’s also a great place to harness the power of FOMO—fear of missing out.

NextSale enables you to create a sense of urgency across your site, including the Checkout page. Create messages with the drag-and-drop builder, customize their designs, and create rules for how and when they appear.

What kinds of messages can you create? Think countdown bars, free shipping prompts, exit-intent popups, and more. Plus, it integrates seamlessly with your Omnsend account for maximum effectiveness. 

3. Make manual customizations

If the customization you want to make isn’t available through the block editor or extensions—and you’re familiar with code—then you can manually edit the WooCommerce Checkout page template. 

Reminder: Make sure you back up your WordPress site before editing any files in case anything goes wrong. It’s also best practice to test major changes on a staging site and always use a child theme so as not to lose your work when updating.

Use CSS to edit the Checkout page design

You can use CSS to make a wide variety of visual changes to the WooCommerce Checkout page template. For example, you might change a font size, adjust the padding around an element, or change the color of buttons so that they stand out more.

Since there are so many possibilities, we can’t address them all here. But, as a starting point, here’s a list of tags, classes, and IDs for the default Checkout page:

<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”>

Note that this list may change based on your theme or if you’re using WooCommerce checkout blocks.

To add CSS to your site if you’re using a block theme, go to Appearance → Editor → Styles. Click the Edit Styles icon, then choose the ellipses icon at the top right of the Styles panel. Finally, click Additional CSS.

If you’re not using a block theme, simply go to Appearance → Customize → Additional CSS.

Now, let’s look at a couple of examples. If you want to change the size and color of the “Total” label using a block-based checkout experience, you would use this code:

.wc-block-components-totals-item__label{

Font-size: 20px !important;

Color: purple !important;

}

Of course, make sure to customize the color and size based on your needs and brand.

Or, let’s say that you want to change the background color of the Checkout button using the standard WooCommerce Checkout page. You would add code similar to this:

.woocommerce-checkout #place_order {

    background: #a6f41b !important;

    color: #ffffff !important;

}

Again, customize colors as you see fit.

Use PHP to edit the Checkout page functionality

But what if the changes you want to make go beyond design? That’s where PHP comes in.

You’ll add any PHP code to your child theme’s functions.php file, which you can access via FTP or your hosting provider’s cpanel. Another option is to use a code snippets plugin.

This is a great way to modify checkout fields without an extension. For example, if you want to remove the “billing company” field, you would use this code:

function wc_remove_checkout_fields( $fields ) {

    unset( $fields[‘billing’][‘billing_company’] );

    return $fields;

}

add_filter( ‘woocommerce_checkout_fields’, ‘wc_remove_checkout_fields’ );

If you wanted to make a required field optional, you could use this code:

add_filter( ‘woocommerce_billing_fields’, ‘wc_unrequire_wc_phone_field’);

function wc_unrequire_wc_phone_field( $fields ) {

$fields[‘billing_phone’][‘required’] = false;

return $fields;

}

You can learn more about manually creating custom fields in the WooCommerce documentation. 

Results of customizing the WooCommerce checkout page

Customizing your Checkout page is an excellent way to improve the user experience, support your visual brand, and deliver quality service. And as you can see here, there are a variety of ways to do this, no matter your experience level.

One of the best ways to customize WooCommerce checkout pages — and your online store as a whole — is to integrate with Omnisend.

By reaching subscribers through a variety of touchpoints using email and SMS marketing automations, you can maximize the impact of your efforts and turn first-time buyers into lifelong customers.

WooCommerce checkout customization FAQs

What is the WooCommerce checkout page?

The WooCommerce Checkout page is the final step in a customer’s journey before buying. It provides details of their order with fields to enter payment and delivery details as a minimum.

What is the best way to customize a WooCommerce checkout page?

The best way to customize a WooCommerce Checkout page depends on your brand’s requirements. You may want to obtain more information from customers, offer other payment methods, or recommend similar products to increase order value, for example.

Should I back up my site before editing the checkout page?

It’s always advisable to back up your site before making significant changes, such as customizing the Checkout page.

What else can I do to improve my WooCommerce checkout page?

WooCommerce automation can improve your Checkout page even more, in a number of ways. Take a look at our guide to automation on WooCommerce for some simple tips and tricks.