Looking for a way to edit the WooCommerce checkout page? In this in-depth tutorial, I'll show you how to add new fields, remove unwanted fields, rearrange fields, and much more to create a custom WooCommerce checkout page for your store.
The checkout page is the last stage of the shopping journey, so it makes sense to optimize it to increase your store's conversion rate and overall revenue.
I see these questions all the time from Woo store owners who want to edit the WooCommerce checkout page:
How do I change the layout of a checkout page in WooCommerce?
How do I create a custom checkout page in WooCommerce WordPress?
Can I customize WooCommerce checkout page?
Yes, you sure can! And that's what you'll learn in this step-by-step tutorial.
By default, WooCommerce doesn't include the option to edit the checkout fields, so there are 2 ways to make these kind of modifications:
Add custom code snippets to your theme's function.php files to modify its checkout template. You'll need to know how to create a child theme and add filters and custom CSS using WooCommerce's built-in checkout hooks.
This is a no-code tutorial, so I'll use the best WooCommerce checkout editor plugin to create the custom checkout page, YITH WooCommerce Checkout Manager.
In addition, I'll show you how to use WooCommerce Fast Cart to add an instant shopping cart and checkout to speed up the checkout process and boost your store's conversion rates even further.
Let's begin with a quick overview of the default WooCommerce checkout page and why many store owners prefer to modify it.
Overview of the default WooCommerce checkout page
The default WooCommerce checkout page asks customers for a truckload of information. The default fields customers are asked to enter are:
First name
Last name
Company name
Country
Address line 1
Address line 2
Town/City
Province/County/District
Postcode / ZIP
Phone
Email address
Order notes
This is a decent starting point, but it has a lot of limitations. What if your WooCommerce store doesn't need all that customer information? What if you need more customer information? Or, what if you want to want to reorder the fields?
Fundamental limitations of the default WooCommerce checkout page
Some fields might not apply to your business. For instance, if you don't offer physical products that require shipping, having shipping-related fields could confuse customers and slow down the checkout process.
You may require additional fields. You may need to confirm specific customer preferences or order-related details.
The order of fields may not be user-friendly. The default checkout page has a predefined set of fields and steps for shoppers to fill in their details and complete their purchase, which may not be suitable for some WooCommerce stores.
What are the benefits of creating a WooCommerce custom checkout page?
Stores that optimize their WooCommerce checkout pages tend to benefit from higher conversion rates, sales and revenue, and lower cart abandonment rates. Here's how:
Reduced clutter: Some fields in the default WooCommerce checkout pages may not be relevant to your business and can distract customers. Getting rid of these unnecessary fields avoids overwhelming customers and can thus reduce abandoned carts.
Collecting useful customer information: Some stores can benefit from adding new custom checkout fields to collect specific customer details. For instance, while the default WooCommerce checkout page allows customers to enter their billing phone number, there's no field to enter a shipping phone number. Store owners may want to add a shipping phone number field to send timely delivery updates to customers.
Smoother user experience (UX): The default WooCommerce checkout fields may not always follow the most intuitive order for your customers. Using labels, descriptive placeholder text and tooltips to add helpful explanations for each field, and rearranging fields in a more logical sequence can guide customers through the checkout process much faster.
Cohesive shopping experience: Using a consistent scheme for the main and background colors, fonts, and visual elements creates a seamless and more pleasant shopping journey for your customers.
Personalized checkout experience: You can use conditional rules to display or hide fields based on certain conditions and tailor the checkout experience to individual customers. For example, if you run a jewelry store, you can configure the checkout settings to display a "Gift Message" field only for customers who select the gift-wrapping option. This level of personalization (1) makes the checkout process more relevant to the customer's needs and (2) prevents showing unnecessary fields and avoids cluttering the checkout page.
Introducing the best edit WooCommerce checkout page plugin
You can use YITH WooCommerce Checkout Manager to customize your entire checkout page: add new fields, remove unnecessary fields, add extra information with labels and tooltips, and much more. It even lets you use conditional rules to hide or show fields based on the products customers add to their carts.
What I like the most about this plugin is that it's super easy to use — its drag-and-drop system makes it easy to move fields around based on your preferences. Plus, it pairs well with many plugins, such as WooCommerce Fast Cart, WPML, and others, which are used on many WooCommerce sites.
Top Features
You can use YITH WooCommerce Checkout Manager to:
Add unlimited custom fields: Easily add text fields, checkboxes, date pickers, selects, radio buttons, etc to your checkout page.
Remove unnecessary fields: Trim down the checkout form by hiding or removing fields that aren't relevant to your online store.
Rearrange fields: The drag-and-drop feature lets you easily reorder existing fields to be more intuitive.
Add more information: Use labels and tooltips to add extra details to guide customers through the checkout process quickly.
Validate essential details in real-time: It uses Javascript Field Validation to perform instant error checks for mandatory fields to make sure the details customers entered are correct before proceeding to payment.
Show conditional fields: You can use conditional logic rules to make fields dynamically appear or disappear based on cart contents, product categories, or customers' previous selections.
Update styling: Change colors for input field border, Input field border (correct info), error message, and more.
Log onto your WordPress admin dashboard and go to Plugins → Add New.
Click on "Upload Plugin" and select the plugin ZIP file you downloaded to your computer.
Click Install Now → Activate.
Navigate to YITH → License Activation.
Select 'Checkout Manager' from the 'Choose the plugin' dropdown, enter your license details, and click 'Activate'.
Adding new checkout fields
Navigate to YITH → Checkout Manager → Checkout Fields within your WordPress dashboard.
Follow these steps:
YITH WooCommerce Checkout Manager groups the checkout form fields into three: billing fields, shipping fields, and additional fields. Select the tab for the type of field you want to add.
For this tutorial, I've selected the 'Billing' tab.
Enter the field name into the 'ADD NEW FIELD' box. I've entered 'Billing Address'.
Select the relevant options based on the field you want to create:
Name: Update the field name if you prefer.
Type: Pick what kind of field you want to add: text, number, password, phone, big text area, radio choice, checkbox, dropdown choice, multi-choice, date, time, or heading.
Label: Enter the title for the field.
Placeholder: Add the default text customers will see in the field.
Tooltip: Add the text to be displayed in the tooltip. This will only show if you've turned on the "Enable Tooltip" option on the general settings page.
Position – Pick where the field goes in the line. Selecting "First" sets it on the left, "Last" sets it on the right, and "Wide" takes up the whole line space.
"Class" – Add graphical CSS rules for the field.
"Label Class" – Add graphical CSS rules for the label.
"Validation" – Add validation rules if necessary. This is useful for phone numbers, VAT, country, email, or zip code fields.
"Required" – Make the field a required field.
"Clear Row" – If the field was entered as first in position and is followed by the last field, the second field must have this option checked.
"Display in emails" – Choose whether or not to show the field you just created in the order confirmation email.
"Display in Order detail pages" – Choose whether or not to display the field you just created on the order summary page.
Click on 'Save' near the bottom right corner.
Editing checkout fields, labels, and tooltips
To use the plugin as a checkout field editor, navigate to YITH → Checkout Manager → Checkout Fields within your WordPress dashboard.
Follow these steps:
Select the tab for the type of field you want to modify, whether billing, shipping, or additional fields.
For this tutorial, I've selected the 'Additional Fields' tab.
Click on the 'Edit' button for the checkout field you want to modify to open up the edit panel.
Update the appropriate field. Here are the options and what they mean:
Name: Update the field name if you want to.
Type: Change the field type to text, number, password, phone, big text area, radio choice, checkbox, dropdown choice, multi-choice, date, time, or heading.
Label: Modify the title of the field.
Placeholder: Change the default text that customers see in the field.
Tooltip: Update the text to be displayed in the tooltip. This will only show if you've turned on the "Enable Tooltip" option on the general settings page.
Position – Modify where the field goes in the line. Selecting "First" sets it on the left, "Last" sets it on the right, and "Wide" takes up the whole line space.
"Class" – Update graphical CSS rules for the field.
"Label Class" – Update graphical CSS rules for the label.
"Validation" – Modify validation rules if necessary. This is useful for phone numbers, VAT, country, email, or zip code fields.
"Required" – Make the field required.
"Clear Row" – If the field was entered as first in position and is followed by the last field, the second field must have the Clear Row option checked.
Click on 'Save' near the bottom right corner.
Creating conditional logic rules
Conditional logic lets you hide or display fields based on specific rules. To give you an example of how this works, imagine that your eCommerce store sells both physical and virtual products. You can hide the "Shipping Address" section for customers who add only virtual products to their carts.
You can set conditional rules while adding a new field or editing an existing one.
Follow these steps:
Navigate to YITH → Checkout Manager → Checkout Fields within your WordPress dashboard.
Add a new field or edit an existing one.
Fill in these options to create a conditional rule:
Field: Choose the first criteria (fields or cart contents) to apply the conditional logic.
Condition: Specify the requirement for the field to show.
Value: Type in the field's value, e.g., product/category IDs, to trigger the conditional behavior.
Action: Pick whether to display or hide the current field if the condition is met.
Required: Select this if the current field has to be set as mandatory.
Click on the + (plus) sign if you want to set up more conditions for the same field. Otherwise, select 'Save' at the bottom right corner of the page.
Removing or hiding checkout fields
Navigate to YITH → Checkout Manager → Checkout Fields within your WordPress dashboard.
Follow these steps:
Select the tab for the field you want to remove: whether billing, shipping, or additional fields.
Locate the field you want to get rid of.
You can't delete default fields, but you can hide them from customers' view. Click on 'Disable' or 'Remove', as appropriate.
Scroll down and click on 'Save changes'.
Changing the order of fields on the checkout page
Navigate to YITH → Checkout Manager → Checkout Fields within your WordPress dashboard.
Follow these steps:
Select the tab for the field you want to remove: whether billing, shipping, or additional fields.
Locate the fields you want to reorder.
Drag and drop the fields as desired using the icon on the left side of the screen.
Go to the bottom of the page and click on 'Save changes'.
Changing the design & styling to match your brand
Navigate to YITH → Checkout Manager → Settings → Style options within your WordPress dashboard.
You can change the color of:
Input field height in pixels
Input field border
Input field border on focus
Input field border(correct info) color
Input field border (wrong info) color
Error message color
Bonus: Speed up ordering by displaying your custom WooCommerce checkout in an on-page popup
Editing the checkout page increases conversions by helping customers complete the last step of the shopping journey. But there's an equally powerful way to further boost your store's conversions: streamlining what happens after customers add products to their carts and before they begin the checkout process. That's where the WooCommerce Fast Cart plugin comes in.
I'll cover what WooCommerce Fast Cart does in a bit, but first, let's rewind a bit and look at how the default WooCommerce cart process works.
The default WooCommerce add to cart process
After adding products to their carts, customers are directed to the cart page. Here, they can review the items they've added, enter coupons, make changes to quantities or product variations, and see an estimated total. Once customers are satisfied with the contents of their cart, they proceed to the checkout page, where they enter their billing and shipping details, select shipping methods, and choose payment options to finalize their order. That means every customer must visit at least four pages every time they want to buy products from your store!
There are two fundamental limitations to this default process:
It can be lengthy and complex: Research from the Baymard Institute showed that 18% of customers abandon their carts because of long, complicated checkouts. It stands to reason: forcing customers to navigate through multiple pages to place an order can make the shopping process feel tiresome and complex. This quickly leads to frustrated customers who abandon their carts before completing the checkout process (after all the work you've done to lead them there).😒
It doesn't allow upsell and cross-sell: The default setup doesn't let store owners show customers related or complementary add-on products on the cart page. This is a missed opportunity to strategically offer cross-sells and up-sells to customers and increase the average order value.
So, how do you fix these limitations in your store?
Essentially, here's what WooCommerce Fast Cart does: When customers select the 'Add to cart' button to add products to their carts, the plugin opens up a pop-up or floating cart/checkout page. This allows customers to immediately place their orders on the same page they're on instead of redirecting them to a separate cart page and making them navigate through multiple pages just to checkout.
Note: The pop-up or floating cart icon only appears when items are in the cart to avoid distracting customers. You can configure the plugin to place the floating cart icon to your website's top-right, bottom-right, or center-right corner. Like this:
You can use WooCommerce Fast Cart in two ways on your store:
Together with the default cart page and checkout page: This means keeping the regular WooCommerce cart and checkout pages as they are. Customers can use the fast cart by clicking the floating cart icon or the pop-up cart. This way, they can choose to checkout using the default process or with the streamlined, instant checkout.
To replace the default cart page and checkout page: The other way to use the plugin is as a complete replacement of the WooCommerce cart and/or checkout pages. With this option, the pop-up cart will open when customers select the cart or checkout links.
The best part? WooCommerce Fast Cart pairs nicely with the YITH WooCommerce Checkout Manager plugin. This means all the checkout field edits that you made using the YITH plugin will appear in the WooCommerce Fast Cart checkout.
Top benefits of using WooCommerce Fast Cart
Direct checkout: The instant cart includes all the cart and checkout fields. This creates a one-page checkout and allows shoppers to skip the default cart page and go directly to checkout from the popup or floating cart. The plugin works with several payment gateways like PayPal, Stripe, Amazon, PayPal, etc. Customers can choose their desired payment method, enter their shipping and billing details within the popup, and place orders quickly.
Upsells and cross-sells: Studies show that promoting upsells and cross-sells can boost the average order value (AOV) and revenue of eCommerce sites by as much as 10 to 30%! WooCommerce Fast Cart lets you present related product recommendations with handy 'Add-to-cart' buttons so customers can easily add products from the cart page. Here's how it looks on the instant cart page, under the 'You may be interested in' header':
Google address auto-complete: Another way WooCommerce Fast Cart speeds up the checkout process is by using Google address auto-complete to automatically fill out customers' address details like country, state, city, street address, zip code, and other fields as they type. This saves customers the time and hassle of having to enter every detail and makes checking out even smoother.
Here's a detailed overview of how WooCommerce Fast Cart works:
When shoppers add products to their carts, a floating or popup cart automatically appears on the same page. This lets customers access their carts without leaving their current page.
The popup shows customers a summary of the items in the carts along with relevant details such as quantities and prices — essentially the same information on the default cart page.
Customers can view their cart's contents, make changes like adjusting quantities, and remove items right within the instant cart.
Customers who are ready to checkout can enter their payment and shipping details within the popup. This lets them skip the default cart page and proceed directly to checkout. They can also use its direct checkout option to begin checkout quickly.
Customers who are not ready to checkout can exit the popup cart and continue browsing your store. The floating cart icon will remain in a non-obtrusive location on the screen. Customers can simply click on it whenever they are ready to begin the checkout process.
Ready to edit the WooCommerce checkout page?
Customers who reach the WooCommerce checkout page are on the last legs of their online shopping journey. Creating a custom checkout page optimizes your store's checkout process and boosts conversions.
While there's no way to edit the checkout fields using the default WooCommerce install, YITH WooCommerce Checkout Manager lets store owners easily create custom checkout pages. You can use YITH WooCommerce Checkout Manager to:
Add new, custom fields like text, radio buttons, date pickers, checkboxes, selects, and more.
Remove unwanted fields.
Reorder fields using a drag-and-drop system.
Add or update labels and tooltips to add extra information to checkout fields.
Show or hide fields conditionally based on customers' previous selections, product categories, or shopping cart contents.
If you want to further boost your store's conversion rates , use WooCommerce Fast Cart to make the checkout process even smoother. WooCommerce Fast Cart replaces the default WooCommerce cart and checkout pages with a simple, instant pop-up or floating cart. It also has the following benefits:
Instant checkout: Customers can access their cart and initiate checkout from wherever they are on your website — home page, category page, shop page, single product page and anywhere else.
Direct checkout: This lets customers skip the default WooCommerce cart page and checkout pages and place orders quickly.
Promotes upsells and cross-sells: To show related product recommendations to let customers add products from the cart page.
Google address auto-complete: Saves customers from having to type in their address details and makes the checkout even smoother.
