Posted on

How to Edit WooCommerce Checkout Page (Code + Plugins)

Learn the four coding ways to customize your WooCommerce checkout page and also how to do it easily using a checkout optimization plugin.

How to edit WooCommerce checkout page

Last updated on February 10, 2023

The default WooCommerce checkout page is good, but not optimized for conversions.

The checkout page that is visually appealing, and has minimum yet required fields will nudge more visitors to make a purchase.

So how to edit WooCommerce checkout page to get more sales?

Let’s look at the code and some popular plugins to customize the checkout page.

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.

Cashier WooCommerce one page checkout

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:

  1. Via the theme
  2. Using CSS
  3. Hooks (actions & filters)
  4. 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 checkout hooks visual
  1. woocommerce_before_checkout_form
  2. woocommerce_checkout_before_customer_details
  3. woocommerce_checkout_billing
  4. woocommerce_before_checkout_billing_form
  5. woocommerce_after_checkout_billing_form
  6. woocommerce_before_checkout_registration_form
  7. woocommerce_after_checkout_registration_form
  8. woocommerce_checkout_shipping
  9. woocommerce_before_checkout_shipping_form
  10. woocommerce_after_checkout_shipping_form
  11. woocommerce_before_order_notes
  12. woocommerce_after_order_notes
  13. woocommerce_checkout_after_customer_details
  14. woocommerce_checkout_before_order_review_heading
  15. woocommerce_checkout_order_review
  16. woocommerce_checkout_before_order_review
  17. woocommerce_review_order_before_cart_contents
  18. woocommerce_review_order_after_cart_contents
  19. woocommerce_review_order_before_shipping
  20. woocommerce_review_order_after_shipping
  21. woocommerce_review_order_before_order_total
  22. woocommerce_review_order_after_order_total
  23. woocommerce_review_order_before_payment
  24. woocommerce_review_order_before_submit
  25. woocommerce_review_order_after_submit
  26. woocommerce_review_order_after_payment
  27. woocommerce_checkout_after_order_review
  28. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.