How to Edit WooCommerce Checkout Page (Code + Plugins)

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 free, i.e. 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 you don’t want to fall into coding hassles, using a checkout field editor plugin is the best and easiest option.

And Cashier for WooCommerce is the plugin you need.

Cashier provides a simple UI to edit/add/remove core WooCommerce fields and also add custom fields for an optimized checkout in the three sections – Billing, Shipping and Additional.

WooCommerce cashier checkout field editor

You can edit, enable, disable, and remove the default checkout fields; rearrange them, validate them, change labels, reset to defaults and also add custom CSS classes…all these with an easy and user-friendly interface.

Get the required information from the shoppers by adding new fields to your WooCommerce checkout page.

Not just checkout field editor, Cashier also provides you with one page checkout, direct checkout using Buy Now buttons, side cart, frequently bought together and other enhancements.

Winding up

We hope this article helped you customize the WooCommerce checkout page easily.

For any questions or suggestions, drop your comments below.