Как изменить шаблон checkout woocommerce

WooCommerce is a flexible and powerful plugin that you can use to turn your WordPress site into a dynamic ecommerce store. However, if you’re looking to reduce shopping cart abandonment, drive conversions, and boost revenue, it’s important to pay careful attention to your WooCommerce checkout page.

There are so many different ways to style and edit the checkout page in WooCommerce. Whether you’re starting your first online shop and seeking to understand how this page works, or you want to enhance the checkout experience on your existing WooCommerce site, we’ve got you covered.

In this post, we’ll explain what the WooCommerce checkout page is and how it functions. Then we’ll walk you through the many options you have to style, change, and leverage it to optimize conversions using plugins, code, themes, and more.

And remember, your ultimate goal is to increase your store’s revenue. So be sure to download our free ebook, 10 Ways to Boost Your WooCommerce Product Page Conversions.

Let’s jump right in!

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.

Want to… ✅ reduce shopping cart abandonment, ✅ drive conversions, and ✅ boost revenue? Then this article is for you.👇 Learn how to build a customized WooCommerce checkout page in minutes ⏱Click to Tweet

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 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 “exampledomain” 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 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!

Learn how to style, change, and leverage your WooCommerce checkout page⚡️ to optimize conversions and 💰 boost your revenue here ⬇️Click to Tweet

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 code. 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 provide 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 different ways you can implement to improve and optimize your WooCommerce checkout page.

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!

WooCommerce is a flexible and powerful plugin that you can use to turn your WordPress site into a dynamic ecommerce store. However, if you’re looking to reduce shopping cart abandonment, drive conversions, and boost revenue, it’s important to pay careful attention to your WooCommerce checkout page.

There are so many different ways to style and edit the checkout page in WooCommerce. Whether you’re starting your first online shop and seeking to understand how this page works, or you want to enhance the checkout experience on your existing WooCommerce site, we’ve got you covered.

In this post, we’ll explain what the WooCommerce checkout page is and how it functions. Then we’ll walk you through the many options you have to style, change, and leverage it to optimize conversions using plugins, code, themes, and more.

And remember, your ultimate goal is to increase your store’s revenue. So be sure to download our free ebook, 10 Ways to Boost Your WooCommerce Product Page Conversions.

Let’s jump right in!

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.

Want to… ✅ reduce shopping cart abandonment, ✅ drive conversions, and ✅ boost revenue? Then this article is for you.👇 Learn how to build a customized WooCommerce checkout page in minutes ⏱Click to Tweet

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 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 “exampledomain” 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 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!

Learn how to style, change, and leverage your WooCommerce checkout page⚡️ to optimize conversions and 💰 boost your revenue here ⬇️Click to Tweet

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 code. 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 provide 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 different ways you can implement to improve and optimize your WooCommerce checkout page.

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!

Страница Оформления заказа — одна из самых главных страниц в процессе покупки товара.

На этой странице клиенты вводят личные данные и делают оплату.

Учитывая конкуренцию в любой нише и количество брошенных корзин, нужно настроить эту страницу так, чтобы уменьшить отказы и увеличить продажи насколько это возможно.

Хотя стандартная страница Оформления заказа в WooCommerce уже достаточно проработанная, вы можете сделать некоторые изменения, чтобы увеличить конверсию.

В этой статье вы узнаете, как изменить страницу Оформления заказа, чтобы улучшить поведение посетителей и увеличить продажи.

Зачем изменять страницу Оформления заказа

Исследование Baymard, проведенное в 2020 году, показывает, что почти 70% покупателей бросают корзину во время оформления заказа. Одна из главных причин заключается в том, что оформление заказа слишком длинное или сложное.

Так как привлечь посетителей на сайт довольно сложно, нужно приложить максимум усилий, чтобы как можно меньше посетителей бросали корзину и покидали сайт на странице Чекаут.

Устраните отвлекающие и раздражающие факторы, которые замедляют процесс оплаты, добавьте факторы доверия и предоставьте несколько возможностей оплаты.

Содержание:

1. Сократите процесс оформления заказа
2. Отредактируйте поля
3. Автозавершение заказов
4. Факторы доверия
5. Цены в местной валюте
6. Поп-ап при намерении выйти
7. Напоминание о брошенной корзине
8. Разные варианты оплаты
9. Добавьте создание аккаунта
10. Условные поля

Сократите процесс оформления заказа

Чтобы уменьшить количество отказов и брошенных корзин, сделайте процесс оформления заказа как можно более коротким, или частично автоматизируйте.

Например, можно сократить время работы с магазином и оформлением заказа, используя прямые ссылки для оформления заказа.

• Как изменить поведение кнопки Добавить в Корзину WooCommerce
• Прямая ссылка на вариативный товар WooCommerce

Вы можете добавить кнопку быстрой покупки (Quick Buy) в магазин или товары, чтобы покупатели могли пропустить добавление товаров в корзину и сразу перейти к оформлению заказа.

• 3 Способа отключить Корзину в WooCommerce

Или можно добавить Корзину на страницу Оформления заказа, чтобы посетители не терялись между шагами.

Отредактируйте поля

Первая вещь, которую вы можете сделать — убрать ненужные поля. Например, если у вас цифровые товары, то вам не нужны поля с адресом доставки. Если у вас мембершип-сайт, то вам нужны только поля с личной информацией посетителей, и так далее.

Кроме этого, вы можете изменить порядок полей, чтобы упростить их заполнение, или добавить собственные поля. Например, чтобы что-то спросить у посетителей, или добавить раздел ЧаВо / FAQ.

Обычно посетителям не нравятся длинные формы, поэтому оптимизируйте поля до необходимого минимума:

• Отображайте только необходимые поля. Вы можете удалить необязательные поля, например, название компании.
• Если вы продаете цифровые товары, уберите все поля доставки: индекс, город, улица, и так далее.
• Отключите проверку почтового индекса, чтобы уменьшить количество действий при оформлении заказа.
• Если вы продаете физические товары, сделайте платежные поля по умолчанию полями доставки, чтобы скрыть ненужные поля.
• По возможности используйте автозаполнение, чтобы сократить время посетителей на заполнение форм.
• Вместо отображения 2 полей (имя и фамилия) вы можете использовать одно поле для полного имени.

Это можно сделать вручную, или с помощью плагина:

Обычно я использую этот бесплатный плагин, с его помощью вы можете убрать лишние поля на странице Чекаут, переименовать их или изменить их порядок.

Лучший платный плагин, который мне удалось найти, — WooCommerce Checkout Manager.

Этот плагин может убирать, добавлять, переименовывать и изменить последовательность полей, добавляет возможность загружать файлы, добавляет информацию из кастомных полей в е-мейлы WooCommerce и работает с условными полями и условной логикой.

• Как удалить ненужные поля вручную или с помощью плагина
• Как редактировать поля на странице Оформления заказа WooCommerce

Автозавершение заказов

Если вы продаете цифровые товары, то вам нужно настроить оплату заказов так, чтобы пользователи получали доступ к своему продукту сразу после оплаты.

В зависимости от вашего плагина приема оплаты или агрегатора платежей, подтверждение об оплате может прийти через несколько минут или часов, или вообще не прийти.

Если ваш плагин или агрегатор платежей не сразу передает или вообще не передает подтверждение об оплате, вы можете настроить автоматическое изменение статуса заказа, чтобы вам не пришлось обновлять статус заказа вручную при каждом новом заказе.

• Как автоматически менять статус заказа в WooCommerce

Или используйте этот плагин:

Факторы доверия

Количество интернет покупок постоянно растет, поэтому безопасность сайта имеет большое значение. Согласно данным исследования, 17% покупателей бросают корзину во время оформления заказа, потому что они не доверяют сайту.

Чтобы зашифровать личные данные пользователей и данные банковских карт во время оформления заказа установите SSL сертификат.

Защита сайта является одним из факторов ранжирования сайтов в поисковой выдаче, поэтому настройте и другие способы защиты.

• 10 Главных факторов ранжирования поисковых систем
• Безопасность Вордпресс. Подробное описание

Еще одна вещь, которая вызывает доверие посетителей — логотипы сервисов платежных шлюзов, чтобы ваши посетители знали, что ваш сайт поддерживает все эти способы оплаты. Обычно это VISA, MasterCard, МИР, PayPal, Stripe и так далее.

Эти значки создают доверие у покупателей, чтобы они не беспокоились о том, что их личная информация или банковские реквизиты будут украдены.

Чтобы добавить картинки способов оплат перед кнопкой Подтвердить заказ, используйте этот снипет:

Замените путь к картинке на ваш в строке 3.

Также вы можете добавить другие элементы или картинки на других местах страницы Оформления заказа (хуки Woocommerce), например, картинки с Гарантией.

• Хуки WooCommerce на странице Оформления заказа

Еще одна вещь, которую вы можете здесь сделать — изменить текст на кнопке Подтвердить заказ.

Вы можете изменить текст для всех товаров на всем сайте, для определенных товаров по ID, в зависимости от категорий товаров или в зависимости от выбранного способа оплаты:

• Как изменить текст на кнопке Оформления заказа в WooCommerce

Цены в местной валюте

Если ваши посетители покупают ваши товары или услуги из разных стран, добавьте им возможность видеть цены в своих валютах.

Тогда вашим посетителям не придется открывать новую вкладку браузера с конвертером цен и переводить одну валюту в другую, и они будут точно знать, сколько именно им нужно заплатить.

Это особенно важно, когда посетители завершают оформление заказа, и им не нужно отвлекаться на посторонние вещи.

Вы можете добавить переключение валют с помощью плагинов:

Если вы хотите использовать платный плагин, попробуйте плагин Currency Converter Widget с официального сайта WooCommerce:

Поп-ап при намерении выйти

Когда посетитель хочет уйти с сайта и ведет мышку к кнопке Х, ему показывается поп-ап с призывом к действию, например, предложение подписаться на рассылку, скидкой, и так далее.

Хотя многие считают, что такие поп-апы раздражают, исследования показывают, что они эффективны и могут увеличить конверсию на 10%.

Существует множество платных и бесплатных плагинов для добавления всплывающих окон, которые открываются при намерении выйти с сайта. Вы можете попробовать Optin Monster, Popup Maker, Elementor или плагин вашей CRM.

Поп-апы с появлением по условию есть во многих премиум-темах, например, Blocksy и Kadence.

Напоминание о брошенной корзине

Согласно статистике, большинство посетителей бросают корзины при посещении сайта. Вы можете отправлять им сообщения на е-мейл с напоминанием о завершении покупки.

Многие магазины их используют, потому что они очень эффективны. Эти электронные письма могут отличаться в зависимости от магазина или сферы деятельности.

Это может быть одно письмо с товарами, которые посетитель оставил в корзине, или серия электронных писем, в которых вы предлагаете скидку. Суть этих сообщений в том, чтобы напомнить покупателю о товарах, которые он оставил в корзине, и убедить его их купить.

Вот несколько популярных плагинов, с помощью которых вы можете напоминать о незавершенных покупках:

С помощью этих плагинов вы можете создать купон со скидкой на следующую покупку:

Разные варианты оплаты

Еще один способ сократить количество отказов от покупок — предоставить покупателям несколько разных способов оплаты.

Добавьте все популярные способы приема оплат, включая банковские карты, электронные кошельки, например, ЮМани и PayPal и сервисы типа Apple Pay, Google Pay и Samsung Pay.

• Плагин приема платежей через Юмани с лайф-тайм лицензией на неограниченное число сайтов

WooCommerce поддерживает все эти платежные шлюзы, и настроить их довольно просто. Чтобы вашим посетителям было удобно оплачивать покупки, добавьте как можно больше вариантов оплат.

Добавьте создание аккаунта

Если вы добавите возможность создавать аккаунт при оформлении заказа, то пользователи смогут сохранять свои настройки, историю покупок, фильтры магазина и так далее.

В следующий раз, когда посетитель будет покупать какой-то товар, ему не придется вводить свои данные еще раз, вся эта информация будет заполняться по умолчанию.

Имея е-мейлы пользователей, вы можете предлагать им другие товары, делать эксклюзивные предложения, например, специальные купоны на скидку, которые они могут получать в своих аккаунтах или по электронной почте.

Условные поля

Условные поля — хороший способ оптимизации страницы Чекаут. Условные поля позволяют отображать или скрывать одно поле в зависимости от значения другого поля.

Например, ваши клиенты могут забрать купленные товары самовывозом, или выбрать доставку на дом. Вместо нескольких дополнительных полей с адресами вы можете создать условное поле, чтобы поля адреса отображались когда посетитель выбирает вариант доставки.

Самый простой способ добавить условные поля — с помощью платного плагина WooCommerce Checkout Manager.

Страница оформления заказа — одна из самых важных в интернет-магазине. Её содержание оказывает большое влияние на конверсию и количество брошенных корзин, поэтому оставьте только то, что нужно, и уберите все, что не нужно.

Читайте также:

1. Как отключить уведомления WooCommerce
2. Как отключить кнопку В корзину в WooCommerce
3. Как вывести цену товара WooCommerce в любом месте сайта
4. Как кастомизировать кнопку Оформления заказа WooCommerce
5. Как редактировать поля на странице Оформления заказа WooCommerce

Оставляйте комментарии.

Looking for ways to edit the checkout page in your store? The checkout is one of the most important steps in the purchase process, so it’s key that you optimize it to increase conversion rates. In this guide, we’ll show you different methods to customize the WooCommerce checkout page both with plugins and programmatically.

Why should you edit the checkout page in WooCommerce?

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

Even though WooCommerce includes a good default configuration, you may need to edit the checkout page to increase conversion rates on your store. Some of the changes you can apply to edit your WooCommerce checkout page are:

• Create a one-page checkout
• Change the checkout style and design with CSS
• Add, remove, or rearrange checkout fields
• Include content
• Make a field required or optional
• Add conditional fields and create conditional logic
• Add extra fees for shipping, packaging, and so on
• And many others

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 edit the checkout page in WooCommerce.

WooCommerce checkout page customization: 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)

Let’s have a closer look at each option.

1) Customize the checkout page with a plugin

If you don’t have coding skills, you can edit 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 on the market for a couple of years and has more than 90,000 active downloads. It has a free version with basic but powerful functionalities that you can download from here and 3 premium plans with more advanced features that start at 19 USD (one-time payment). Let’s have a look at what this tool can do.

WooCommerce Checkout Manager

Checkout Manager is one of the best plugins to manage your checkout page. It allows you to add, edit, 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 fields such as the first and last name, company name, country, city, zip code, address, phone number, email, and others. 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.

Create a custom upload file field

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. Additionally, you can add fixed or percentage fees to any core or conditional fields.

Add fees to the checkout

Another interesting option to edit the WooCommerce checkout page is to add fees. This can be very useful if you want to include an additional charge for situations like:

• Express delivery
• Special handling
• Extra charge for shipping to certain countries or locations
• Fees related to credit cards or payment gateways

Even though WooCommerce offers some options to add these extra charges, Checkout Manager provides you with more control and flexibility. To add fees with Checkout Manager, and go to WooCommerce > Checkout > Billing.

You’ll see different billing fields that you can enable. For this demonstration, we’ll add a fee for Express Delivery and we’ll need to create a new field, so we press the Add New Field button. We’ll select radio as the button type and give a name to the new field.

Then, go to the Options tab and we’ll add two labels: Yes and No. When the shopper selects Express Delivery, we’ll add an extra charge of $10.

Save the changes and that’s it! Now when the user selects the Express Delivery option at checkout, an extra fee of $10 will be added to their cart.

Create conditional fields

Besides adding fields and fees, you can also customize the WooCommerce checkout page by creating conditional fields to improve the user experience. You simply need to select the conditional parent field and value. Let’s see the step-by-step process:

1. In your WordPress dashboard, go to WooCommerce > Checkout > Billing and click Add New Field
2. Select the type of field you want to create and fill in the label, placeholder/type, and description. This will depend on the type of conditional you’re creating
3. After that, tick the conditional checkbox on the right. Select the parent field and the value the parent field has to take to display the conditional field
4. Press Save and you’re done!

The good thing is that Checkout Manager allows you to create unlimited custom fields and apply as many conditions as you want to edit your checkout page and provide users with a unique experience.

For more information on how to create conditional fields in WooCommerce, have a look at this full guide that has several examples of what you can do to customize your checkout.

This is just a simple example but there’s much more you can do. For more information, check out our full guide on how to add fees to the WooCommerce checkout.

All in all, if you want to easily edit the checkout page, WooCommerce Checkout Manager is a great choice. The free version is a great start but if you want more advanced features, we recommend any of the premium plans.

2) Edit the checkout page programmatically (coding)

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

1. Add custom fields to the WooCommerce checkout page
2. Save custom fields to the database
3. Make a required field optional
4. Add content to the checkout page
5. Use shortcodes in the WooCommerce checkout page
6. 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. 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 the 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. 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 WooCommerce 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) Make a required field optional

Another simple yet effective way to edit the checkout page in WooCommerce is to make mandatory or required fields optional. This way, you let shoppers fill in only the fields that are necessary for the transaction and improve their buying experience.

For example, let’s say you sell downloadable or virtual products so you want to make the Address field in the Billing section optional. Simply add the following code to the functions.php file of your child theme.

add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');
function wc_address_field_optional( $fields ) {
$fields['billing']['billing_address_1']['required'] = false; 
return $fields; 
}

Using this snippet as a base, you can make more fields optional in no time.

Conditional fields

If you want to take your WooCommerce checkout page a step further, you can customize it by adding conditional fields. Conditional fields have conditional logic so that there are fields that appear or disappear based on the values of another field. For example, you can create conditional logic so that the credit card fields only appear if the user selects Credit Card as the payment option.

To know more about conditional fields and how to use them to edit your checkout page, have a look at this complete guide.

2.4) Add content to the checkout page

Another way to edit 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" />;
}

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>
";
}

Another interesting alternative is to add a message to your checkout page. Typically, stores mention things related to shipping, delivery, and so on. For example, let’s say you want to remind customers that they might need to wait 5 business days to receive their products. In the functions.php file of your file theme, add:

add_action( 'woocommerce_after_order_notes', 'wc_add_message' );
function wc_add_message () {
echo 'Please remember that delivery may take up to 5 business days.';
}

2.5) Add Fees to the checkout page

Let’s have a look at how to edit the WooCommerce checkout page and add extra fees. Most of the time, there are two types of additional fees:

• Fixed
• Percentage

In this section, we’ll show you how to add both to your checkout.

Add a fixed fee

A typical example of a fixed fee is express delivery. Let’s say you want to include a $10 fixed fee for express delivery.

Simply use the script below and edit the text for the field name. In this example, we’ll call the “Extra Charge” and it will add $10 to the order.

add_action('woocommerce_cart_calculate_fees', function() {
if (is_admin() && !defined('DOING_AJAX')) {
return;
}
WC()->cart->add_fee(__('Extra Charge', 'txtdomain'), 10);
});

Keep in mind that this code will automatically add a $10 fixed fee to the total of the customers’ order during checkout.

Add a percentage-based fee

Another alternative is to charge a percentage-based fee. This can be useful if there are extra taxes or you want to add an extra cost for certain payment gateways charges. Let’s say we want to add a 3% fee to the total price of the order (products + shipping).

add_action('woocommerce_cart_calculate_fees', function() {
if (is_admin() && !defined('DOING_AJAX')) {
return;
}
$percentage = 0.03;
$percentage_fee = (WC()->cart->get_cart_contents_total() + WC()->cart->get_shipping_total()) * $percentage;
 WC()->cart->add_fee(__('Tax', 'txtdomain'), $percentage_fee);
});

This script will add a 3% fee to the shopper’s total order during checkout.

For more information and examples to add fees to your store, check out our guide on how to add fees to the WooCommerce checkout.

2.6) Use shortcodes on 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('[woocommerce_cart]');

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('[woocommerce_cart]'); }

This script will bring the

[woocommerce_cart]

shortcode into action, displaying the WooCommerce cart at the bottom of the 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.7) 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 edit 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 taking them as a base and playing 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.

Bonus: Checkout Hooks

There are many checkout hooks that you can use to edit the checkout page in WooCommerce. These are some of the main ones:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_before_checkout_billing_form
• woocommerce_checkout_shipping
• woocommerce_before_order_notes
• woocommerce_checkout_after_order_review
• woocommerce_checkout_after_customer_details
• woocommerce_review_order_before_cart_contents
• woocommerce_review_order_before_shipping
• woocommerce_review_order_after_order_total
• woocommerce_checkout_order_review
• woocommerce_review_order_before_submit
• woocommerce_review_order_before_payment
• woocommerce_review_order_after_submit
• woocommerce_after_checkout_form

For more information about hooks and how they work, check out the following guides:

• How to use WooCommerce checkout hooks
• How to use WooCommerce hooks – The Full Guide

Finally, for the full list of hooks that you can use, have a look at this documentation page.

How to increase Checkout Page conversion

One of the main goals of checkout page optimization is increasing conversions. This means, improving the number of users who purchase from your WooCommerce store without having to increase the number of visitors. This is key to making your checkout and your overall business more efficient.

Let’s have a look at some ways to do it:

1) Offer more payment options

One of the mistakes that can cost you a lot of money is not offering enough payment options. This is especially important if you have customers from different countries.

Nowadays, people expect to have different options to pay, so you should let your shoppers decide the most convenient method for them. Accepting credit and debit cards and PayPal payments is a great way to increase your conversions.

2) Clear Pricing details

Have you ever been shopping online and then seen an extra charge that you weren’t aware on the last step? Experiences like this are quite common and deliver a terrible shopping experience. To reduce checkout cart abandonment and boost your conversions, make sure that your pricing and all the extra fees are clear from the start. This means clearly stating shipping costs, taxes, additional charges, and anything extra that the customer will have to pay.

Nobody likes discovering hidden costs and charges when they’re ready to pay, so avoid being that store at all costs.

3) Avoid unnecessary fields

A complicated checkout is one of the main reasons for checkout cart abandonment. That’s why you should make the checkout as simple as possible and remove or hide unnecessary fields that may distract shoppers. For example, if you sell a digital product, do you really need the shopper’s address? Probably not. Simply remove all distractions and only leave the fields that are strictly necessary.

For more ideas on how to optimize your WooCommerce checkout page, have a look at this guide.

Conclusion

All in all, editing 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 powerful functionalities to edit the checkout page, and it’s easy to use.

Also, you can try to tailor your entire payment page to match your brand with help of Fondy. From design, imagery, and color scheme to typefaces and logos. Custom checkout pages help to build customer trust and reduce cart abandonment. You can also change your payment fields and messaging to match promotions and seasonal sales.

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 edit 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 edit 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 the checkout customizations that you have applied to your site? Let us know in the comments section below! We’ll be happy to hear from you!

Your WooCommerce checkout page is where all the money comes in, so any little tweak has the chance of increasing your revenue.

Customizing your checkout can be done with custom code or with WooCommerce extensions, we will cover both of those here.

Customizing WooCommerce checkout is something we are intimately familiar with. We recently built a new product called WooCommerce Smart Checkout, which required a lot of customization. We’ll share what we learned, along with lots of other tips in this article.

WooCommerce allows you to move or change existing checkout fields, add new ones, completely change the design, and do anything you want. This can be done with custom code in a plugin or child theme, or with an existing WooCommerce extension.

Let’s take a look at how to customize your checkout form.

Table of Contents

1. Manipulating Checkout Fields
2. Moving or re-ordering Fields
3. Custom Checkout Page Template
4. WooCommerce AJAX
5. Other Customizations
6. Customization advice from the Pros

Manipulating Checkout Fields

WooCommerce has hooks and filters that allow you to do anything you want with the fields, from changing the text to completely removing them. You can also add your own fields to any section of the form you want.

The easiest way to do this is with the Checkout Field Editor extension.

Checkout Field Editor

This extension starts at $49, and allows you to do anything you want to the checkout fields. It is much easier than using custom code, and it works seamlessly out of the box.

For example, let’s say we want to move the email field to be first, before any other fields.

To do that with this extension activated, we just have to drag and drop our email field where we want it.

With this extension, you can edit fields in the billing and shipping sections, and even add new fields. You can change the field attributes, such as input type and placeholder text, change the position, and even add new fields.

This extension does not change the order review or purchase options, that is handled separately. It also does not allow you to use custom input types, such as type=”tel”. I really like the “tel” input type for credit card and phone number inputs, because it displays a number pad on mobile phones.

Custom Code

If you would rather use custom code to edit your checkout fields, there is some great documentation on that.

Your custom code can be placed in a custom plugin or child theme functions.php file. Let’s look at some examples.

Better Input Attributes

When creating WooCommerce Smart Checkout, we wanted to change some of the input types so they were better for mobile. These change the keyboard that is displayed, which makes a big difference.

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

// Our hooked in function - $fields is passed via the filter!
function set_input_attrs( $fields ) {
       $fields['billing']['billing_email']['type'] = 'email';
       $fields['billing']['billing_phone']['type'] = 'tel';
       $fields['billing']['billing_postcode']['type'] = 'tel';
       $fields['shipping']['shipping_postcode']['type'] = 'tel';

       return $fields;
  }

You can change the type on any other field by adding it to that list. You can also change other input attributes using the same type of code, such as placeholder or class.

In this example, we are changing the placeholder of the email field, and adding a new field for Shipping Phone.

add_filter( 'woocommerce_checkout_fields', 'custom_edit_checkout_fields' );

function custom_edit_checkout_fields( $fields ) {
	// Author: apppresser.com

	// Change placeholder
	$fields['billing']['billing_email']['placeholder'] = '[email protected]';

	// Change all attributes on a field
	$fields['shipping']['shipping_phone'] = array(
		'label'     => __('Shipping Phone', 'woocommerce'),
		'placeholder'   => _x('(555) 555 5555', 'placeholder', 'woocommerce'),
		'required'  => false,
		'class'     => array('my-special-class'),
		'clear'     => true
	);

   return $fields;
}

Make Phone Number Optional

add_filter( 'woocommerce_billing_fields', 'my_optional_fields' );

function my_optional_fields( $address_fields ) {
	$address_fields['billing_phone']['required'] = false;
	return $address_fields;
}

The same code works to make other fields optional, just make sure you use the right filter. For example, here is how to make the address 1 field optional.

// Hook in
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

// Our hooked in function - $address_fields is passed via the filter!
function custom_override_default_address_fields( $address_fields ) {
     $address_fields['address_1']['required'] = false;

     return $address_fields;
}

Moving or re-ordering Fields

Moving fields is one of the trickier customizations. Woo does not provide us with example code, so there are a lot of random code samples out there. I found that most of them left out required fields, or did not work 100%.

I would recommend that you use the Checkout Field Editor extension mentioned above to move fields and maintain compatibility with WooCommerce updates. If you really want to do it yourself, the code below uses all required fields in the WooCommerce documentation. It has been tested with WooCommerce 2.5.5.

add_filter( 'woocommerce_checkout_fields', 'yourplugin_move_checkout_fields' );

function yourplugin_move_checkout_fields( $fields ) {
	// Author: apppresser.com

	// Move these around as necessary. You'll see we added email first.
	$billing_order = array(
		"billing_email",
		"billing_first_name",
		"billing_last_name",
		"billing_company",
		"billing_address_1",
		"billing_address_2",
		"billing_postcode",
		"billing_country",
		"billing_state",
		"billing_phone"
	);

	// This sets the billing fields in the order above
	foreach($billing_order as $billing_field) {
	    $billing_fields[$billing_field] = $fields["billing"][$billing_field];
	}

	$fields["billing"] = $billing_fields;

	// Move these around as necessary
	$shipping_order = array(
		"shipping_first_name",
		"shipping_last_name",
		"shipping_company",
		"shipping_address_1",
		"shipping_address_2",
		"shipping_postcode",
		"shipping_country",
		"shipping_city",
		"shipping_state"
	);

	// This sets the shipping fields in the order above
	foreach($shipping_order as $shipping_field) {
	    $shipping_fields[$shipping_field] = $fields["shipping"][$shipping_field];
	}

	$fields["shipping"] = $shipping_fields;

	return $fields;
}

While this does work to move fields around, it does not account for any changes to the default fields, or adding custom fields. If this code runs later than other field customizations, it may override them.

Checkout Page Template Customizations

Besides moving fields around, you can also manipulate the page display.

For example, you could make the shipping fields display before the billing fields, or display a special message on the checkout page. This is done by using action hooks, or a custom checkout page template.

Checkout Hooks

There are 9 hooks on 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 hooks are used by WooCommerce core to display checkout page elements, such as the billing and shipping fields. You can use them to add your own custom content. See a visual guide to these checkout action hooks here.

If you wanted to add a message before the checkout form, you could do something like this.

add_action( 'woocommerce_before_checkout_form', 'my_checkout_msg' );

function my_checkout_msg() {
	echo '<p>This page is 100% secure. Thank you for your business!</p>';
}

You could add that same message in other places on the checkout page, by using a different hook, such as woocommerce_checkout_after_order_review.

You should be able to do most of your customizations using the hooks and filters above, and some custom CSS. If you really need to make some big moves, you can use a custom checkout page template.

We did this for WooCommerce Smart Checkout, so we could create a multi-page checkout experience for mobile.

Tip: all of the action hooks and filters for WooCommerce are listed on this page.

Custom Checkout Page Template

WooCommerce allows you to override any of their page templates in your theme.

To add a custom checkout page template to your (child) theme, create a folder structure called woocommerce/checkout inside your theme folder. Next, copy the checkout page template from the WooCommerce plugin located at woocommerce/templates/checkout/form-checkout.php.

Copy woocommerce/templates/checkout/form-checkout.php to mytheme/woocommerce/checkout/form-checkout.php

You can now make any edits you want to mytheme/woocommerce/checkout/form-checkout.php, and it will not be overwritten when you update WooCommerce. Remember that any changes you make may affect WooCommerce core or extension functionality. I would recommend leaving all of the default actions and markup unless you know what you are doing.

Custom Template in a Plugin

When we created our plugin, we needed to use a custom checkout page template to create a multi-page checkout.

You cannot add a custom checkout page template in a plugin by default, so we had to use a custom filter. If you are creating a plugin, and not adding the checkout page to your theme, do the following.

First, add the custom form-checkout.php template in your plugin inside of a folder named “checkout.” For example, plugin/templates/checkout/form-checkout.php is a good place for it.

Next we need to tell WooCommerce to look in our plugin for our checkout page first using the woocommerce_locate_template filter.

/*
 * Use our custom woo checkout form template
 * Source: apppresser.com
 */
add_filter( 'woocommerce_locate_template', 'custom_woocommerce_locate_template', 10, 3 );

function custom_woocommerce_locate_template( $template, $template_name, $template_path ) {

  global $woocommerce;

  $_template = $template;

  if ( !$template_path ) $template_path = $woocommerce->template_url;

  $plugin_path  = untrailingslashit( plugin_dir_path( __FILE__ ) ) . '/templates/';

  // Look within passed path within the theme
  $template = locate_template(
    array(
      $template_path . $template_name,
      $template_name
    )
  );

  // Modification: Get the template from this plugin, if it exists
  if ( file_exists( $plugin_path . $template_name ) ) {
    $template = $plugin_path . $template_name;
  }

  // Use default template if no other exists
  if ( !$template ) {
    $template = $_template;
  }

  // Return what we found
  return $template;

}

You may need to edit the $plugin_path variable, depending on your plugin structure. Now you can edit your custom checkout template and it will not be overwritten by WooCommerce updates.

WooCommerce AJAX

We did a lot of javascript customization, and one issue we ran into was running our code at the right times.

WooCommerce updates the cart totals and other information on the fly with AJAX. For example, if you change the shipping options on the checkout page, the cart total and payment options may update. If you are using custom Javascript, you’ll want to make sure your code runs after the checkout page is updated (if necessary).

In our case, we display the cart total at the top of the custom checkout page, and this needs to update when the AJAX runs.

It is very difficult to tap into the WooCommerce AJAX events directly, but there is something better we can do. There is an “ajaxComplete” listener we can use to know when any event takes place. Then we can look at the data, and if it’s a WooCommerce checkout update, we can run our code. Here’s what that looks like:

// Put this in a document ready event
$( document ).ajaxComplete(function( event, xhr, settings ) {

  console.log( settings.url );

  // settings.url tells us what event this is, so we can choose what code we need to run
  if( settings.url.indexOf('update_order_review') > -1 ) {

  	// update order form
  	doTotalUpdates();

  } else if( settings.url.indexOf('wc-ajax=checkout') > -1 ) {
  	// Add messages after checkout here
        doAfterCheckout();
  }

});

In our case, this allowed us to know what event was happening, and we could update our code accordingly. Very handy!

Other Customizations

There are a variety of WooCommerce extensions that allow further customization to the checkout page.

One Page Checkout

This extension allows you to put your sales copy, product selection, and checkout form together on a single page. This works great for some types of businesses.

Checkout Add-ons

This extension allows you to add extra inputs to your checkout page. For example, custom engraving instructions, gift wrapping yes/no, upsell options, and lots more. It’s the no-coding equivalent to adding your own custom checkout fields.

Quick Checkout

Quick Checkout is a popular extension that allows you to display your checkout form in a pop-up modal on any page.

Instead of clicking add to cart => view cart => checkout, you can instantly show the checkout form, saving a few steps.

WooCommerce Smart Checkout

Smart Checkout instantly improves your mobile checkout experience, getting you more sales. It features a sleek mobile checkout page, multi-step checkout, address autofill, and more.

Customization Advice from the Pros

There are lots of ways to customize your checkout form, but don’t make changes just because you can.

Make sure you understand your visitors, and you test your changes to make sure they are actually improving conversions.

We asked some WooCommerce professionals what they recommend when making changes to your checkout page, here’s what they said.

Brent Shepherd, founder of Prospress, and creator of WooCommerce Subscriptions says:

The thing I’d recommend is to run user tests of checkout customisations.

You can always A/B test things, but sitting in the same room as someone talking through their thinking process while progressing through your checkout, of watching a video of a customer talking through the process of checking out will be very revealing.

Those custom buttons, banners or fields might not be perceived or understood the way you think they will. Running user tests always reveals the unexpected to allow you to customise checkout to address that, ultimately helping improve conversions.

If you are interested in how user testing works, we recently did user testing on our own product, and wrote about it here.

Let us know in the comments if you have any advice on customizing WooCommerce checkout.

The checkout page is one of the most important pages on any eCommerce website. All the effort that you put into your website content, design and marketing will amount to nothing if your customers keep abandoning their carts and never complete the checkout process. Some statistics show that cart abandonment rate can range from 64% to around 90% depending on the industry in which you are selling products.

The WooCommerce WordPress plugin automatically creates a checkout page for your website visitors to complete their order by filling out a form. However, it is a general-purpose form meant to cover all bases and is not optimized for your specific use-case. This means that your cart abandonment rates are likely to be high. Reducing the abandonment rate can be the difference between just getting by and making a decent amount of profit to further expand the business.

In this tutorial, I’ll show you how to customize the checkout page in WooCommerce for free using plugins and a little bit of code.

Tips for Improving the Checkout Process

There are a few things that you can change on the checkout page to improve your conversion rate.

You should consider keeping the number of fields required to complete an order as low as possible. This helps for two reasons. First, people are usually unwilling to share extra personal information due to privacy concerns. Second, filling out a form takes time, and not everyone will be willing to spend theirs filling out unnecessary details.

Another thing that you can do to improve your conversion rate is build customer confidence. You can do that by adding a customer testimonial on the checkout page. Also try to convey that the payment process is handled in a secure manner on your website. Making all common payment methods available also helps.

One of the primary reasons for abandoned carts is additional unexpected checkout fees due to high shipping charges or some other reason. Make sure that customers don’t see any extra charges on the checkout page and provide legitimate explanations for charges that you cannot avoid. Any discount coupons should also work as expected on the checkout page.

Customizing the Checkout Page

We will now incorporate some of these tips to customize our own WooCommerce checkout page. The following image shows what the checkout page looks like in its default form for the Storefront theme.

Removing and Rearranging Fields

As you can see, there are a couple of extra fields like Company Name that we don’t want our customers to fill out. We will get rid of them and arrange the remaining fields in a different order, like bringing the phone and email address fields close to the name input.

Begin by installing Checkout Field Editor for WooCommerce from the WordPress plugin directory. Once you have installed and activated the plugin, navigate to WooCommerce > Checkout Form from the dashboard menu.

Drag the fields around to place them in any order that you prefer. After that, select the billing_company field and click on the Remove button as shown below. Finally click on the Save changes button, and you will see the changes reflected on the checkout page on reload.

You might have noticed that there was no option to remove the Order notes field in the settings. You will find it by switching the tabs to Additional Fields at the top of plugin settings. Please note that you probably won’t be able to remove the Order notes field by selecting it and clicking on the Remove button. This is because it is the only field under that tab. Another way to get rid of it is to click on the Disable button and then Save changes.

You can also add extra fields to the checkout form based on your specific business needs. For this example, I am adding a checkbox to let us know that the order is a gift. First, we click on the Add Field button and then select Checkbox from the dropdown menu. Once you have filled out all the other information as shown in the image below, click on the Save & Close button.

Updating Text Content

The Checkout Field Editor provided us with an easy way to add, remove, or rearrange fields in the checkout form. Now, we will use another plugin called StoreCustomizer to make changes to the text on the checkout page. This plugin allows us to make changes to different pages in our WooCommerce store. We used it in the tutorial about customizing the WooCommerce shop page.

Once you have installed the plugin, navigate to Appearance > Customize > StoreCustomizer > Checkout Page. You should now see a bunch of options under different headings.

We will begin by checking the box for Edit Coupon Section Text. Replace the default text with anything that is appropriate for your business. Once you are done, hit the Publish button to apply changes.

Scroll down a bit within the StoreCustomizer checkout page settings, and you will find another subsection titled Design Elements. You can tweak the settings here to customize the Place Order button. Change the text, font size, padding, and color values to something that goes well with your overall website design.

You can also change the headings for different sections by checking the box for Customize checkout details headings. It will also allow you to change the font size and color. I have made the text slightly bigger by setting the font size to 32 pixels. I have also set the color to black.

Updating the Appearance With CSS

We were able to make some changes to the appearance of different elements on the checkout page using the StoreCustomizer plugin. However, the plugin only has limited options for styling changes.

Our best bet is to use custom CSS that we can place inside Appearance > Customize > Additional CSS. In this case, we will modify the look of the coupon section as well as the order summary table. Some other minor changes include the addition of borders under the input fields.

You can find the selectors for different elements using the style inspector in the respective browsers. Here is the CSS that I am going to use for our checkout page.

1

input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea, .input-text {

2

    background-color: #f1f1f1l;

3

	box-shadow: none;

4

	border-bottom: 1px dashed black;

5

}

6

7

.woocommerce-info, .woocommerce-noreviews, p.no-comments {

8

  background-color: #ff7800;

9

  border-left: 0.5rem solid #00000075;

10

  font-size: 1.25rem;

11

  padding: 1.25rem 4rem;

12

  line-height: 1;

13

  margin-bottom: 1rem;

14

}

15

16

table.woocommerce-checkout-review-order-table th.product-name, table.woocommerce-checkout-review-order-table th.product-total {

17

  background: #222;

18

  color: white;

19

  font-size: 150%;

20

  padding: 0.5rem 1.5rem;

21

}

22

23

table:not(.has-background) tbody tr:nth-child(2n) td {

24

  background-color: #e3e3e3;

25

}

26

27

table:not(.has-background) th, tfoot tr td {

28

  background-color: #666;

29

  color: white;

30

  font-size: 1.2rem;

31

  padding: 0.75rem 1rem;

32

}

33

34

.button {

35

  background-color: #00bc1d;

36

  color: #fff;

37

}

38

39

.button:hover {

40

  background-color: #37960c;

41

  color: #fff;

42

}

Click on the Publish button now, and you will have a checkout form that looks like the image below.

Adding Content Using Hooks

This last section requires you to have at least a little bit of familiarity with coding. Any wrong steps could potentially make your site inoperable until you fix the errors. Please be careful and make extra changes only if you know what you are doing. We will be updating the functions.php file of your current theme here. Make a copy of the file before proceeding.

A lot of developers integrate hooks within their plugins so that others can customize the plugin functionality according to their own needs. These hooks allow you to make changes within the plugin at specific predefined points. WooCommerce also has lots of hooks of its own that are mentioned on its website. However, you might prefer to see it all laid out visually. Take a look at this visual guide for WooCommerce checkout page hooks.

Let’s say you want to add a customer testimonial before the payment methods. The visual chart shows us that we will have to use the hook woocommerce_review_order_before_payment to add the testimonial there. Add the following code to the functions.php file.

1

add_action( 'woocommerce_review_order_before_payment', function() {

2

    echo '<figure class="testimonial">

3

    		<blockquote>

4

        		<p>I trust TutsPlus Demo (Monty) to always sell top-quality products.</p>

5

    		</blockquote>

6

    		<figcaption>—James</figcaption>

7

		  </figure>';

8

});

You can also use some CSS to make the testimonial blend in with the rest of the layout. Place the following CSS inside Appearance > Customize > Additional CSS, as we did in the previous section.

1

figure.testimonial {

2

    margin: 2rem 0;

3

}

4

5

figure.testimonial blockquote {

6

	margin: 0;

7

	font-size: 1.3rem;

8

	font-style: normal;

9

	border-left: 5px solid #888;

10

	background: #efefef;

11

	padding: 2rem 1rem 0.1rem 1rem;

12

}

13

14

figure.testimonial figcaption {

15

	text-align: right;

16

	font-size: 1.5rem;

17

	color: black;

18

}

Your checkout page should now look like the image below.

Final Thoughts

In this tutorial, we used a combination of techniques to customize a WooCommerce checkout page for free. The easiest and safest way to make content-related changes is with plugins, both free and paid. After that, you can make layout-related or visual changes using custom CSS code. Sometimes, the customization that you are looking for might not be provided with either free or paid plugins. In that case, your best bet is to write your own code.

Hopefully, you will be able to follow the steps in this tutorial to create your own customized WooCommerce checkout page.

Did you find this post useful?

I am a full-stack developer who also loves to write tutorials. After trying out a bunch of things till my second year of college, I decided to work on my web development skills. Starting with just HTML and CSS, I kept moving forward and gained experience in PHP, JavaScript, and Python.

I usually spend my free time either working on some side projects or traveling around.

Ok

Contents

• 1 What If Your Custom WooCommerce Checkout Looked Modern & Converted 3x More?
• 2 Why You Might Want to Customize the Default WooCommerce Checkout Page?
• 3 Checkout Plugins & Conflicts: Why WooCommerce Checkout Customization Is Hard?
• 4 How to Customize WooCommerce Checkout for Higher Conversions?
  • 4.1 Step 1: Add a new funnel and name it
  • 4.2 Step 2: Select the funnel template that you like and import it
  • 4.3 Step 3: Edit the checkout page template
  • 4.4 Step 4: Customize the checkout form fields
  • 4.5 Step 5: Enable WooCommerce Checkout optimization tactics
• 5 Add Order Bump & Thank You Page to Complete Your WooCommerce Checkout Flow
• 6 Automate Abandoned Cart Recovery Emails to Get More Sales
• 7 Ready to Customize WooCommerce Checkout Page & Woo Customers?