How to Edit WooCommerce Checkout Page (Code + Plugins)

Checkout process is super important for your store’s success. Imagine entering a store, ready to buy, only to find the checkout process super confusing, slow, and overwhelming.

What are the chances? Would you stay there waiting to make the purchase or walk out? Well, for most of us, it’s the second option. Now imagine if this is exactly what’s happening with your WooCommerce store.

While the default WooCommerce checkout is quite functional, it often falls short of delivering a seamless, conversion-friendly experience.

But don’t worry! This guide will show you how to edit WooCommerce checkout page easily. Whether you prefer tweaking the code or using an easy-to-install plugin, we’ve got you covered.

Why customize the WooCommerce checkout page?

When you manage a store, you have many things on your plate. And the last thing you want to do is engage in complex codes. Well, we agree to do this. But don’t overlook the importance of optimising your checkout page.

Your checkout page is the final step in your customer’s buying journey. A poorly optimized page can ruin this last step and cause your potential buyers to abandon their purchase.

Now, default WooCommerce checkout offers some basic functionalities, but it comes with various limitations:

The default checkout lacks branding. It means you cannot align the checkout page with your brand’s personality.
Similarly, sometimes, this involves too many steps.
Lastly, it doesn’t always allow you to tailor fields to suit your business needs.

Result? Poor conversion rates and high cart abandonments.

On the other hand, a well-optimized checkout page:

Provides higher conversion as it reduces friction and encourages customers to complete their purchase.
Gives your customers a more personalized and user-friendly checkout experience.
By using features like one-page checkouts and auto-filled fields, you can eliminate unnecessary delays and keep your customers engaged.
A quick and seamless experience keeps customers happy and more likely to return.
Lastly, a customized checkout page allows you to integrate payment options, add upsells, and tweak the design to match your brand perfectly.

What to customize on the WooCommerce checkout page?

The default WooCommerce checkout page may not be that annoying for customers, but it has its own downsides. So here’s what you can customize on the checkout page:

Replace the default WooCommerce fonts, colors, logo, styles to match your brand.
Speed up the process by enabling one page checkout.
Add relevant custom checkout fields or remove some additional information.
Add order bumps to promote related products.
Modify shipping options.
Add tax options and coupons at checkout.
Enable or disable payment gateways.
Edit the CTA button text and preset field text.

and some more…

Here’s an example of one page checkout using Cashier plugin.

How to edit WooCommerce checkout page using code?

Let’s see how to edit WooCommerce checkout page for with some code.

In coding, we can customize it in the following ways:

Via the theme
Using CSS
Hooks (actions & filters)
Custom code

Customizing via theme (checkout template)

You can do a majority of customization using hooks, but to edit the markup on the checkout page, you can do that in a theme also.

Now as per WooCommerce documentation, copy the checkout template to your theme in a folder structure like this: woocommerce/checkout/form-checkout.php.

You can then customize form-checkout.php as desired, and it will load instead of the default template.

Customizing via CSS

CSS classes may change based on your theme or plugins, but the default classes are usually available.

You can customize these classes using custom CSS in a child theme, or the customizer. Here are the main high-level tags, with classes and IDs you can use.

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout"> <div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order"><table class="woocommerce-checkout-review-order-table">
<div id="payment"> <ul class="wc_payment_methods payment_methods methods"><div class="form-row place-order">

For example:

form.woocommerce-checkout input[type="text"] {
    border-radius: 3px;
    background-color: #ccc;
    color: #444;
}

Customizing using WooCommerce checkout hooks

There are 28 action hooks available to add or remove elements from the checkout page.

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_before_checkout_billing_form
woocommerce_after_checkout_billing_form
woocommerce_before_checkout_registration_form
woocommerce_after_checkout_registration_form
woocommerce_checkout_shipping
woocommerce_before_checkout_shipping_form
woocommerce_after_checkout_shipping_form
woocommerce_before_order_notes
woocommerce_after_order_notes
woocommerce_checkout_after_customer_details
woocommerce_checkout_before_order_review_heading
woocommerce_checkout_order_review
woocommerce_checkout_before_order_review
woocommerce_review_order_before_cart_contents
woocommerce_review_order_after_cart_contents
woocommerce_review_order_before_shipping
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
woocommerce_review_order_after_order_total
woocommerce_review_order_before_payment
woocommerce_review_order_before_submit
woocommerce_review_order_after_submit
woocommerce_review_order_after_payment
woocommerce_checkout_after_order_review
woocommerce_after_checkout_form

For example, to add a form or field after billing details on the checkout page, you can use the following hook:

add_action( 'woocommerce_after_checkout_billing_form', 'storeapps_after_checkout_billing_form', 10 );
function storeapps_after_checkout_billing_form() {
	echo '<h2>woocommerce_after_checkout_billing_form</h2>';
	// Add your form or field here
}

For more details on how to use each hook, refer to our WooCommerce checkout hooks guide.

Custom code

This is trickier but if you are a developer, here’s how you do it:

WooCommerce has several filters available to edit checkout fields, including woocommerce_checkout_fields, woocommerce_billing_fields, and woocommerce_shipping_fields.

You can use the ‘woocommerce_checkout_fields’ filter to manipulate all the checkout fields.

Remove the billing phone number field

add_filter( 'woocommerce_checkout_fields' , 'storeapps_modify_checkout_fields' );
function storeapps_modify_checkout_fields( $fields ) {
	unset($fields['billing']['billing_phone']);
	return $fields;
}

Add the shipping phone number field

add_filter( 'woocommerce_checkout_fields' , 'storeapps_modify_checkout_fields' );
function storeapps_modify_checkout_fields( $fields ) {
	$fields['shipping']['shipping_phone'] = array(
		'label'       => __('Phone', 'woocommerce'),
		'placeholder' => _x('Phone', 'placeholder', 'woocommerce'),
		'required'    => false,
		'class'       => array('form-row-wide'),
		'clear'       => true
	);
	return $fields;
}

/**
 * To display field value on the order edit page
 */
add_action( 'woocommerce_admin_order_data_after_shipping_address', 
'storeapps_custom_checkout_field_display_admin_order_meta' );
function storeapps_custom_checkout_field_display_admin_order_meta( $order ){
	global $post_id;
	$order = wc_get_order( $post_id );
	echo '<p><strong>'.__('Field Value', 'woocommerce').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}

To edit a field, you can access the field attributes. For example, let’s change the placeholder for Zip to Postal Code.

Change the field placeholder

add_filter( 'woocommerce_checkout_fields', 'storeapps_modify_checkout_fields' );
function storeapps_modify_checkout_fields( $fields ) {
	$fields['billing']['billing_postcode']['placeholder'] = __( 'Postal Code', 'woocommerce' );
	return $fields;
}

We suggest you refer our blog on safely adding code snippets.

How to customize WooCommerce checkout page using a plugin?

If coding feels intimidating, don’t worry—you can use plugins to simplify your job and customize your WooCommerce checkout page.

Need some recommendations? Well, try Cashier for WooCommerce.

This plugin makes your job easy; you don’t have to bury your head in complex coding.

You can follow these steps to customize WooCommerce checkout fields and also add custom fields to your WooCommerce checkout page.

Once you install the plugin. Go to WooCommerce > Cashier. Click on the ‘Checkout Field Editor’ tab.
Here, you will default WooCommerce checkout fields under fields sets that should be enable:
- Billing fields
- Shipping fields
- Additional fields
There are different attributes/ options available for fields to customize.
You can add new custom fields to your WooCommerce checkout page.

Here’s why Cashier is better than coding:

No technical expertise required: Yes, you heard right. You can simply modify the checkout fields with a simple drag-and-drop interface.
Time-saving: Skip the complex codes and save time by easily customising the checkout page with Cashier.
Risk-free: You can always return to the start without breaking your site.

Now while we are onto Cashier, let’s discuss why it’s a must-have for your WooCommerce store:

Flexible checkout field editor: Add, edit, rearrange, or remove fields in the Billing, Shipping, and Additional sections within minutes or seconds (seriously, we are not emphasizing).
One-page checkout: Skip the necessary steps and provide a one-page checkout to your customers, making the whole process simple.
Direct checkout with buy now buttons: Enable quick Buy now buttons to allow shoppers to skip the cart and head straight to checkout.
Side cart functionality: This feature allows your customers to view and update their cart without leaving the current page.
Frequently bought together bundles: Boost your average order value by offering relevant product combinations at the checkout page.
User-friendly interface: These and many features without the need for coding—customizations made quick, easy, and risk-free.

With Cashier, you can tailor your checkout page and enhance the shopping experience while skyrocketing your conversions. All that without the stress of coding.

Top smart plugins to streamline and optimize checkout

Want to make your WooCommerce checkout process even better? Well, try out these handy plugins for optimized checkout and better customer experience.

Here’s what you’ll love:

Smart Offers: Increase your average order value by showing related products on the checkout page. Use Smart Offers to offer personalized upsells, cross-sells, and order bumps to complement your buyer’s purchase—all without interrupting their buying flow. Explore more about Smart Offers.

Conditional Payment Gateways: Offering too many payment options can confuse customers. Use this plugin to display the most relevant payment gateways based on order total, product type, or customer location. Overall, making checkout faster and less complicated. More about Conditional Payment Gateway.

Saved Addresses: Make repeat business fast and effortless by allowing your users to save and quickly select one from multiple saved addresses at checkout. This makes repeat purchases quicker and hassle-free. Explore more about the Saved Addresses.

Express Checkout: Long forms can lead to cart abandonment. Use the Express Checkout plugin to remove unnecessary fields and enable your customers to complete their purchases in just a few clicks. You can use this plugin to eliminate shipping details and provide quicker transactions if you sell digital products. Try Express Checkout.

Try these smart plugins today and see how they transform your checkout process into a seamless, revenue-generating experience!

Bonus tips for checkout page optimization

Want more tips on creating a high-converting checkout page? Here are some bonus tips just for you:

Add a progress indicator: Show your customers exactly where they are and how long it will take to complete the process.
Enable express payments: Try integrating faster payment options like Apple Pay and Google Pay to make checkout faster, especially on mobile.
Use trust badges: Display SSL certificates and secure payment icons to build trust.
Simplify forms: Just ask only for essential details and enable autofill for returning customers.
Offer guest checkout: Allow users to make purchases without creating an account.
Add upsells: Don’t forget to show related products on the checkout page to increase sales.
Mobile optimization: Make sure your checkout page is mobile-friendly with responsive design and easy navigation.
Test and refine: Keep testing everything and adjusting to meet the best standards.

Winding up

Finally, the WooCommerce checkout page is more than just a final step. It is a point that could make or break your customers’ journey.

A clunky, outdated checkout can lead to cart abandonments, while a well-optimized one can lead to higher conversion, enhanced customer satisfaction, and encourage repeat business.

Whether you prefer coding or want to take an easy way out by choosing plugins like Cashier, you must choose a way to tailor the checkout page to your store’s unique needs.

Lastly, don’t forget to explore Cashier for WooCommerce today and see how it can simplify checkout customisation.

FAQ

How do I add custom text to the WooCommerce checkout page?
You can add custom text to the checkout page using WooCommerce hooks in your theme’s functions.php file.

For example, use the following code to add custom notes to thank customers for their purchase:
```
add_action( 'woocommerce_after_checkout_form', 'storeapps_after_checkout_form', 10 );
function storeapps_after_checkout_form() {
	echo '<h2>woocommerce_after_checkout_form</h2>';
}
```
How do I display coupons on the WooCommerce checkout page?
You can use the Smart Coupons plugin by StoreApps to display coupons on the checkout page. To do this, enable a storewide coupon that appears on the checkout, cart, and every other page.

Go to WordPress Admin > Marketing > Coupons, and select the ‘Enable store notice for the coupon’ option. Lastly, hit the save button.
How do I display tax on the WooCommerce checkout page?
Go to WooCommerce > Settings > General and check the Enable taxes and tax calculations box. Save the changes, and you are done. The taxes will be automatically calculated and displayed based on your tax settings for the customer’s location.
How do I enable/disable guest checkout?
Guest checkout allows customers to complete their purchases without creating an account. You will find this documentation helpful to enable this feature.
Will WooCommerce checkout page customization will affect the mobile user experience?
Yes, it can affect the mobile user experience, particularly if the design is not responsive. Ensure that any customizations are mobile-friendly and test the layout across different devices.