December 26, 2023

The Complete Guide to WooCommerce Checkout — Customize Fields, Change Template, Create One-Page Checkouts

 An Overview of the WooCommerce Checkout Page

When you first set up your WooCommerce store, the plugin automatically creates and assigns a checkout page. If you preview it on the front end of your site, you’ll notice that it is rather simple:

By default, WooCommerce asks customers for some basic information. This includes:

• Billing details
• First and last name
• Company name
• Address (Town/City, Country, District, and Postcode/ZIP)
• Phone number
• Email address
• Order notes
• Privacy policy statement

This is important information to include on a WooCommerce checkout page. It provides the details necessary for a customer to complete their purchase, and for the website to process their payment information.

However, there’s nothing here that is necessarily helping to increase conversions or reduce checkout abandonment. What’s more, the default page may not offer the most relevant or useful information for your specific business. Therefore, like many WooCommerce site owners, you might be looking to change both the design and content of your checkout page.

Before we get into the different ways you can customize the checkout page in WooCommerce, there are a few things to understand first.

Let’s talk about where to find this page, as well as the various default settings and features available within the WooCommerce plugin.

Where to Find the Default WooCommerce Checkout Page and Settings

WooCommerce automatically creates a checkout page for your store once you activate the plugin. You can locate it by navigating to Pages > Checkout in your admin dashboard:

You can edit this page just as you would any WordPress content. For example, you can change the page’s title and permalink, add a featured image, modify the page attributes, etc. It also uses the [woocommerce_checkout] shortcode:

There are a handful of standard options for configuring this page, some of which you can find under WooCommerce > Settings > Advanced:

On this screen, under the Page Setup section, you can select a different page to use as the checkout screen for your store. You also have the option to force a secure HTTPS connection.

On the General settings page, you can enable coupons to be used at checkout, and configure how taxes will be calculated:

Under the Accounts & Privacy tab, you can also find a few options for account creation and guest checkouts:

Below that, there is a Privacy policy section where you can modify the privacy policy text that displays on the checkout page:

Beyond these built-in settings, you have limited options for customizing your checkout page using the WooCommerce plugin alone. Fortunately, there are other methods you can use to enhance its appearance and extend its functionality.

Why You Might Want to Change Your WooCommerce Checkout Page

The checkout page is the last thing customers see before completing their purchases. It can make the difference between whether they end up converting or abandoning your site altogether.

As such, it’s essential to make sure that your WooCommerce checkout page is designed well and functions in a way that encourages conversions. There are many ways you can provide a better experience, such as by:

• Changing the design and page template
• Creating a one-page checkout
• Adding, removing, or rearranging fields
• Changing input field labels and button text
• Requiring certain fields to be filled out
• Automatically triggering free shipping
• Directly linking products to the checkout page

Whether you want to overhaul the default page completely or make minor modifications, the important thing is that you’re able to do so with ease. Fortunately, you have multiple options.

 

 

Methods You Can Use to Change Your WooCommerce Checkout Page

There are many ways to change your WooCommerce checkout page. The best one to use depends on a handful of factors, such as the specific edit you’re trying to make and your comfort level with coding.

Some of the methods you can use to enhance your WooCommerce checkout page include:

• WooCommerce features, blocks, and shortcodes. WooCommerce does come with a few built-in features and settings that you can use to improve your store. For example, you can automatically trigger free shipping, as well as directly link products to the checkout page. There are also blocks and shortcodes for modifying the page.
• Plugins and extensions. If you’re not tech-savvy or simply want a quick and hassle-free way to enhance your WooCommerce checkout page, there are plenty of plugins you can use. Most are easy to get started with and require little support. Some add-ons are provided by WooCommerce and available from the extension library, while others are developed and offered by third-party platforms.
• Page templates and themes. If you want to change the style of your checkout page, you can use a pre-built template or theme. As with plugins, this is a solid option if you have limited coding experience and want to make changes to the overall appearance of the page, in order to better match your branding. The downside is that it does not offer as much flexibility as custom coding would.
• Custom code. Another method you can leverage to change the WooCommerce checkout page is custom coding. This is a powerful route if you’re comfortable editing your site’s files and want to add a lot of personalization.

In the following sections, we’ll take a look at some of the most effective changes you can make to your WooCommerce page. For each, we’ll explain why you might want to make the edit, and walk you through the different methods you can use to go about it.

How to Customize the WooCommerce Checkout Fields

One of the most common changes you might make to a WooCommerce page is to modify its form fields. These typically take up the most space on the page, so they need to be relevant. Whether you want to remove fields, rearrange their order, or add new custom fields, you have a couple of options for going about it. You can either use a plugin or edit the code directly.

Using a Plugin to Change the WooCommerce Checkout Fields

If you want a quick and simple way to customize the checkout fields in WooCommerce, we recommend using a plugin. There are a handful of options to choose from.

One of the most popular is the Checkout Field Editor plugin:

This is a freemium tool that lets you add or edit the form fields on your WooCommerce checkout page. You can enable or disable certain fields, as well as rearrange their order.

Although the free version lets you handle these basic tasks, WooCommerce Checkout Field Editor Pro comes with additional functionality. This includes 17 field types and custom hooks.

To use this plugin, you can install it on your WooCommerce site by navigating to Plugins > Add New and then searching for it. Once you find it, click on the Install Now button, followed by Activate.

When it’s activated, you can configure the settings by going to WooCommerce > Checkout Form:

There are three different types of fields you can edit:

1. Billing
2. Shipping
3. Additional

You can select whichever field you want to change and then click on the Remove, Enable, or Disable button. To add a new field, select Add field.

If you want to change an existing form field, select the box to the left, and click on the Edit button. A panel will open where you can change the field type (in the premium version only), edit the field’s label, choose whether it will be required, and more:

When you’re done, click on the Save button. Once you’re finished making all the changes you wish to the checkout page’s fields, be sure to hit Save Changes at the bottom of the screen.

For more detailed guidance, you can refer to WooCommerce’s documentation on using the Checkout Field Editor plugin.

Of course, this is just one of many plugins you can use to change your WooCommerce checkout fields. Additional options worth considering include Flexible Checkout Fields and WooCommerce Checkout Manager, which we’ll discuss more later in this post.

Editing the Checkout Fields Using Code

Another option for editing the fields on your WooCommerce checkout page is to use custom coding. Of course, this requires a certain level of technical knowledge and comfort in working with your site’s files. The advantage is that you have more flexibility in terms of customization than you would with a third-party plugin.

You can edit your checkout fields using your site’s functions.php file and filters such as:

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields

WooCommerce actions and filters let you manipulate the checkout fields almost any way you wish. For example, you can remove them entirely, add new ones, or change the displayed text. Using the woocommerce_checkout_fields filter will enable you to override any field.

Let’s say you want to change the placeholder text for the order_comments field. By default, it is set as the following:

_x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')

To change it, you can add this snippet of code to your functions.php file:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'My new placeholder';

return $fields;

}

To remove a field, you can use the following:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

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

return $fields;

There are many changes you can make to the fields on your checkout page, so we won’t explore all of them here. You can find a helpful list of override checkout field codes on GitHub.

How to Change the WooCommerce Checkout Page Template

By default, your WooCommerce checkout page template will be based on your site’s theme. But maybe you want to change the design to better fit your branding or perhaps you just want to make slight changes to the content of the template page.

The two main methods you can use to change this are by using a pre-built template or adding code. Let’s start with the former.

Starting With a Pre-Built Template to Customize Your Checkout Page

The easiest way to change the design of your WooCommerce checkout page is by installing a pre-built theme, such as the ones in the WooCommerce Themes Store. There are a variety of free options available, as well as premium themes.

You can search for one-page checkout themes, for example, or any other kind of specific templates you’re interested in using. You can also find plenty of WooCommerce themes on Envato Market.

Using Code to Customize the WooCommerce Checkout Page Template

If you’re comfortable editing code, you can also manually change the checkout page template. Depending on your hosting provider, you may be able to do this via File Manager in cPanel or a Secure File Transfer Protocol (SFTP) client.

You can use action hooks to add, edit, or remove elements from your checkout page. There are nine main action hooks that WooCommerce uses for the checkout page:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_checkout_shipping
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_checkout_order_review
• woocommerce_checkout_after_order_review
• Woocommerce_after_checkout_form

These action hooks add markup to the page, which you can use to customize both its style and functionality. If you want to use these action hooks to modify your checkout page template, you can do so by editing the checkout form PHP file.

You can locate the WooCommerce template files under /woocommerce/templates. From your site’s root directory, you’ll need to navigate to wp-content/plugins/woocommerce:

Within these files, there are hooks you can use to add and rearrange content on the template page, without actually editing the template files. To create a custom theme template for your checkout page, you’ll first need to create a “woocommerce/checkout” folder within your theme’s folder.

Next, copy the WooCommerce checkout page template, which you can find at woocommerce/templates/checkout/form-checkout.php:

Then, add it to the new folder you just created. After that, you can edit the file to make your desired changes. When you save the file, the WooCommerce plugin will load this template and override the default page template.

How to Create a One Page WooCommerce Checkout

One of the ways to enhance the checkout experience for your customers, and in the process reduce abandonment rates, is to make it as quick and simple as possible. If you want to shorten the checkout process, you can do so by creating a one-page checkout in WooCommerce.

There are multiple ways to do this. As we mentioned earlier, you can look for a one-page theme or template that will provide a single checkout page. However, if you like your current theme, you may not want to change it.

If that’s the case, don’t worry. There are other options, such as the premium WooCommerce One Page Checkout extension:

Since this solution was developed by WooCommerce, you know that it’s safe, reliable, and offers plenty of support. In addition to letting you transform any page into a checkout page, it comes with a plethora of features for optimizing the one-page checkout process.

You can:

• Display both product selection and checkout forms on one page.
• Enable customers to add or remove items from their carts.
• Let customers complete payments without leaving the page.
• Add custom fields to pages.

After you purchase the extension through your WooCommerce account, you can download the plugin, and then install and activate it on your WooCommerce site.

To use it, navigate to Pages > Add New and select the One Page Checkout icon in the editor toolbar:

In the panel that opens, you can click within the Products field, and begin typing the name of the product(s) that you want to add.

Next, choose the template you want to use (Product List, Product Table, Pricing Table, or Single Product) and click on Create Shortcode.

You can also manually insert the one-page shortcode into any post or page. To learn more about this plugin and how to use it, you can refer to the WooCommerce One Page Checkout documentation.

How to Trigger Free Shipping During the WooCommerce Checkout Process

As an ecommerce business owner, there are many different strategies you can leverage to encourage your customers to spend more. One of those is to offer free shipping.

Of course, you may not want to offer free shipping on every order. However, adding it as an incentive on order totals that reach a certain amount can help you encourage shoppers to spend more than they otherwise would.

Therefore, you may want to configure your WooCommerce checkout page to automatically trigger free shipping on orders above a certain number, such as $100.

The first thing you’ll need to do is to offer the free shipping method to the relevant Shipping Zone(s).

To do so, navigate to WooCommerce > Settings > Shipping:

Hover over the Shipping Zone you want to modify, and then click on the Edit link. If you haven’t added any zones yet, select the Add shipping zone button first and follow the prompts before proceeding.

Next, click on Add Shipping Method. In the modal that opens, select Free Shipping from the dropdown menu, followed by Add shipping method again:

Next, from the Shipping methods list on the settings page, hover over Free Shipping and click on the Edit link.

A Free shipping settings panel will open. From the Free shipping requires…. dropdown menu, select A minimum order amount:

You can then define the minimum order amount. When you’re done, click on the Save Changes button.

How to Directly Link Products to the WooCommerce Checkout Page

Another way you can enhance the checkout experience for your customers is to create direct checkout links. This is helpful for sending customers straight to checkout from product and sales pages.

Creating a Direct Checkout Link Manually

To create and add a direct checkout link in WooCommerce, you can use the following URL: exampledomain.com//checkout/?add-to-cart=ID.

Note: you’ll want to replace “example domain” and “ID” with your domain name and the specific product ID that you’re linking to the checkout page.

To find a product ID, navigate to Products > All Products in your admin dashboard. Browse to the product you want to create the direct link for, and then hover over the name of it to reveal the product ID number:

Once you paste the product ID into the aforementioned URL, you can then place the link anywhere on your WooCommerce site. You can repeat this process for each of your products, even variable and grouped items.

Creating a Direct Checkout Link Using a Plugin

We realize that the above strategy may not be the most efficient method for all users. Depending on how many products you have in your WooCommerce store, it can be very time-consuming.

Fortunately, if you’re looking for a faster method you can also use the Direct Checkout for WooCommerce plugin:

This freemium tool lets you simplify the checkout process in a variety of ways, including by adding a direct link from a product page to the checkout screen. Once you install and activate the plugin on your WooCommerce site, navigate to WooCommerce > Direct Checkout:

Under the General tab, select Yes for the Added to cart redirect option and then choose Checkout from the Added to cart redirect to the dropdown menu. Click on Save changes when you’re done.

Next, navigate to the Products tab:

Enable the Redirect to the cart page after successful addition option. Again, click on the Save changes button. That’s it!

How to Test Your WooCommerce Checkout Page

At this point, you’ve hopefully implemented a variety of ways to enhance your WooCommerce checkout page. Now, it’s essential to make sure that your checkout process is working properly, in order to reduce abandonment and confirm that no errors will interrupt the customer journey.

Fortunately, there is an easy way that you can send a test order and payment through your WooCommerce shop, to make sure that everything is working as it should. To do this, you’ll first need to install the WooCommerce Payments plugin on your site (if you haven’t already):

Once you install and activate the plugin, you can enable ‘test mode’. To do this, navigate to WooCommerce > Payments > Settings:

Remember to save your changes.

Once Test Mode is enabled, you can browse your WooCommerce store and select any product. Add it to your shopping cart and then move to the checkout page.

Fill out the checkout page form fields as necessary. For the payment information, you can use any of the dummy credit card numbers provided by WooCommerce. You can also use any three digits for the CVC code, and select any future date.

When you’re done, click on Place Order. Next, navigate to the Payments > Transactions screen:

Here, you should see the charge show up. If it’s there, you know that your checkout page is working as it should. Remember to turn Test Mode off when you’re done!

 

The Best WooCommerce Checkout Plugins and Extensions

Throughout this post, we’ve covered a wide variety of ways to change your WooCommerce checkout page, including blocks, shortcodes, and custom codes. We’ve also mentioned some key plugins that can help you add features and functionalities that wouldn’t otherwise be available.

However, there are some additional add-ons, plugins, and extensions we haven’t mentioned yet, but that provides you with more customization options for your WooCommerce checkout page. Some of the best ones worth considering include:

• WooCommerce Cart Notices Add-On. This WooCommerce add-on lets you display actionable messages and notifications to your customers during the checkout process. For example, you can use it to notify them of relevant sales and promotions.
• WooCommerce Checkout Manager. Made by the same team that developed Direct Checkout for WooCommerce, this plugin is a powerful extension that you can use to optimize your checkout page. You can use it to edit, remove, and add custom fields, as well as to create condition fields.
• WooCommerce Checkout Add-Ons. This premium plugin lets you add free and paid add-ons at the checkout stage. It’s a helpful tool for increasing conversions and driving revenue.

Depending on the type of ecommerce site you have, you may be looking for even more options. If so, we recommend checking out the WooCommerce Extensions Library, which offers a ton of add-ons for extending the WooCommerce plugin’s features and functionality, including both free and paid solutions.

Summary

There are many different ways you can edit your WooCommerce checkout page to optimize its appearance and functionality. This includes editing or adding custom fields, and creating a one-page checkout process.

Depending on the change you want to make and your experience level, you can leverage WooCommerce plugins and extensions, page templates and themes, and even custom code.

Do you have any questions about using or editing the WooCommerce checkout page? Let us know in the comments section below!