How To Change Woocommerce Checkout Page

Custom Checkout Template

Most customizations can be done using hooks and filters, but if you’d like to edit the markup on the checkout page, you can do that in a theme.

A word of warning: moving around the markup on the checkout page can cause problems with other plugins that use hooks and filters. I would not recommend removing any action hooks, or editing the markup aggressively.

According to the WooCommerce documentation, you can copy the checkout templateto your theme by in a folder structured 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 with 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.

1<body class="woocommerce-checkout">
2
3<div class="woocommerce">
4
5<form class="woocommerce-checkout">
6<div id="customer_details" class="col2-set">
7
8<div class="woocommerce-billing-fields">
9
10<p class="form-row">
11
12<div class="woocommerce-shipping-fields">
13
14<p class="form-row">
15
16<div class="woocommerce-additional-fields">
17
18<div id="order_review" class="woocommerce-checkout-review-order">
19<table class="woocommerce-checkout-review-order-table">
20
21<div id="payment">
22<ul class="wc_payment_methods payment_methods methods">
23<div class="form-row place-order">
24

Example:

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

To see all classes on the checkout page, use a browser inspector.

Checkout Action Hooks

Action hooks can be used to add or remove elements from the checkout page.

There are 9 action 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

There are also 7 additional hooks that may be available, depending on your layout:

  • woocommerce_checkout_before_terms_and_conditions
  • woocommerce_checkout_after_terms_and_conditions
  • woocommerce_before_checkout_billing_form
  • woocommerce_before_checkout_registration_form
  • woocommerce_after_checkout_registration_form
  • woocommerce_before_checkout_shipping_form
  • woocommerce_after_checkout_shipping_form

Checkout Hooks Visualized

It helps to get a visual idea of where the hooks are located.

Here’s the standard WooCommerce checkout page, using the Storefront theme.

WooCommerce Checkout

Here are many of the various hooks you can use, visually placed on the checkout page above.

Action hooks are used to add markup to the page. For example, we can add a message to the customer about shipping details using the woocommerce_before_checkout_shipping_form hook.

1add_action( 'woocommerce_before_checkout_shipping_form'function() {
2    echo '<p>Don\'t forget to include your unit number in the address!</p>';
3});

That looks like this:

You can find documentation on all of the hooks here.

Moving, Adding, or Removing Checkout Fields

The easiest way to customize checkout fields is to use the Checkout Field Editor plugin.

This plugin provides a simple UI to move, edit, add, or remove any checkout fields. You can edit anything about the fields, including type, label, position, and more.

After installing and activating this plugin, you can visit WooCommerce => Checkout Fields to begin editing.

To edit a field, simply change the desired value and save. To add a field, click Add Field, and to remove, check the field and click Disable/Remove.

Custom Code

Custom code is a bit trickier, but if you only want to make a small edit without purchasing a plugin, 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

1// Hook in
2add_filter( 'woocommerce_checkout_fields' 'my_override_checkout_fields' );
3
4// Our hooked in function - $fields is passed via the filter!
5function my_override_checkout_fields( $fields ) {
6     unset($fields['billing']['billing_phone']);
7
8     return $fields;
9}

Add a shipping phone number field

1// Hook in
2add_filter( 'woocommerce_checkout_fields' 'custom_override_checkout_fields' );
3
4// Our hooked in function - $fields is passed via the filter!
5function custom_override_checkout_fields( $fields ) {
6     $fields['shipping']['shipping_phone'] = array(
7        'label'     => __('Phone''woocommerce'),
8    'placeholder'   => _x('Phone''placeholder''woocommerce'),
9    'required'  => false,
10    'class'     => array('form-row-wide'),
11    'clear'     => true
12     );
13
14     return $fields;
15}
16
17/**
18 * Display field value on the order edit page
19 */
20 
21add_action( 'woocommerce_admin_order_data_after_shipping_address''my_custom_checkout_field_display_admin_order_meta', 10, 1 );
22
23functionmy_custom_checkout_field_display_admin_order_meta($order){
24    echo '<p><strong>'.__('Phone From Checkout Form').':</strong> ' . get_post_meta( $order->get_id(), '_shipping_phone', true ) . '</p>';
25}

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

Change Field Placeholder

1// Hook in
2add_filter( 'woocommerce_checkout_fields' 'my_override_checkout_fields' );
3
4// Our hooked in function - $fields is passed via the filter!
5function my_override_checkout_fields( $fields ) {
6     $fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';
7     return $fields;
8}

For more examples, view the WooCommerce documentation here.

WooCommerce Checkout Extensions

There are a variety of extensions available to customize the checkout page, here are just a few.

One Page Checkout

This extension allows you to put a checkout form on the same page as your product, making it a one-step payment process.

The normal WooCommerce flow is: go to the single product, click add to cart, go to the cart page, then go to checkout. One page checkout allows you to change that to: go to the product page => checkout.

Checkout Add-Ons

This extension allows you to add paid services or products at checkout. Examples would be, gift wrapping, priority boarding, setup services, and more.

Social Login

This extension allows customers to use their social accounts to login at checkout, so they don’t have to create a new account manually.

It integrates with most major social networks, such as Facebook, Twitter, Google, and more.