One of the best features of WooCommerce is customization. With the help of hooks, you can add content on the product pages, cart page, and checkout page.
This guide lists all the WooCommerce checkout hooks and where you can place them on the checkout page and for what.
Let’s have a quick walkthrough of what are hooks, their types and then jump to the checkout page hooks.
What are hooks?
Hooks in WordPress allows you to change or add code without modifying the core files.
They are called hooks because it functions like real life hook for holding objects. In the e-commerce world, hooks have been holding additional programs.
These hooks are used by store owners and developers to improve the customer experience. This is where they’ll add paragraphs, product descriptions, icons, images, logos and texts.
The two major types of hooks
Although there are a lot of WordPress hooks, you can classify them into two types:
- Action hooks
- Filter hooks
Action hooks
Action hooks allow you to add extra functionality anywhere on your website. This hook can be used to add extra widgets, menus, or even a message.
This is an example of an action hook:
add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form' );
function storeapps_before_checkout_billing_form() {
// add your code here
}
Where woocommerce_before_checkout_billing_form is the hook and storeapps_callback_function is the function we create to add our custom scripts.
Filter hooks
Filter hooks allow you to modify an existing function. In these hooks, you’re not adding anything new but rather just changing or filtering the data.
For example:
add_filter( 'woocommerce_breadcrumb_defaults', 'storeapps_change_breadcrumb' );
function storeapps_change_breadcrumb( $content ) {
$content .= "StoreApps";
return $content;
}
Another example could be your entire store’s Add to Cart buttons changing with a filter.
Why use hooks in WooCommerce?
There is almost no way you can ignore and not use these hooks once you see what they can do. Everything in your store is customizable, so you can create your WooCommerce store the way you want using these hooks.
You won’t have to worry about these consequences if you use hooks. Changing themes won’t affect the changes. So it’s better to stick with hooks to avoid all the headaches and risks.
Since checkout is the most crucial page for any store, let’s look at the WooCommerce checkout page hooks.
All the WooCommerce checkout hooks
- 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
Let’s look at each hook in detail, where it is placed and how you can add it.
1. woocommerce_before_checkout_form
The hook is defined before the checkout form. It is placed above the coupon field on the checkout page.
add_action( 'woocommerce_before_checkout_form', 'storeapps_before_checkout_form', 10 );
function storeapps_before_checkout_form() {
echo '<h2>woocommerce_before_checkout_form</h2>';
}
2. woocommerce_checkout_before_customer_details
The hook is defined in the checkout form just before the customer details.
add_action( 'woocommerce_checkout_before_customer_details', 'storeapps_checkout_before_customer_details', 10 );
function storeapps_checkout_before_customer_details() {
echo '<h2>woocommerce_checkout_before_customer_details</h2>';
}
3. woocommerce_checkout_billing
This is a new hook added to the checkout page. The billing form template on the checkout page is included using this hook.
add_action('woocommerce_checkout_billing', 'storeapps_checkout_billing');
function storeapps_checkout_billing() {
echo '<h2>woocommerce_checkout_billing</h2>';
}
4. woocommerce_before_checkout_billing_form
The hook is defined before the start of the billing form.
add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form', 10 );
function storeapps_before_checkout_billing_form() {
echo '<h2>woocommerce_before_checkout_billing_form</h2>';
}
5. woocommerce_after_checkout_billing_form
The hook is defined after the completion of the billing form.
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>';
}
6. woocommerce_before_checkout_registration_form
The hook is defined in the billing form template after the account creation form. This will be executed for the guest users.
add_action('woocommerce_before_checkout_registration_form', 'storeapps_before_checkout_registration');
function storeapps_before_checkout_registration_form() {
echo '<h2>woocommerce_before_checkout_registration_form</h2>';
}
7. woocommerce_after_checkout_registration_form
This hook is defined in the billing form template. This will be executed for the guest users.
add_action('woocommerce_after_checkout_registration_form', 'storeapps_after_checkout_registration_form');
function storeapps_after_checkout_registration_form() {
echo '<h2>woocommerce_after_checkout_registration_form</h2>';
}
8. woocommerce_checkout_shipping
This hook is defined in the shipping form template before the shipping form.
add_action('woocommerce_checkout_shipping', 'storeapps_checkout_shipping');
function storeapps_checkout_shipping() {
echo '<h2>woocommerce_checkout_shipping</h2>';
}
9. woocommerce_before_checkout_shipping_form
This hook is defined just before the start of the shipping form.
add_action( 'woocommerce_before_checkout_shipping_form', 'storeapps_before_checkout_shipping_form', 10 );
function storeapps_before_checkout_shipping_form() {
echo '<h2>woocommerce_before_checkout_shipping_form</h2>';
}
10. woocommerce_after_checkout_shipping_form
This hook is defined after the completion of the shipping form.
add_action( 'woocommerce_after_checkout_shipping_form', 'storeapps_after_checkout_shipping_form', 10 );
function storeapps_after_checkout_shipping_form() {
echo '<h2>woocommerce_after_checkout_shipping_form</h2>';
}
11. woocommerce_before_order_notes
This hook is defined before the order notes field on the checkout page.
add_action( 'woocommerce_before_order_notes', 'storeapps_before_order_notes', 10 );
function storeapps_before_order_notes() {
echo '<h2>woocommerce_before_order_notes</h2>';
}
12. woocommerce_after_order_notes
This hook is defined after the order notes field on the checkout page.
add_action( 'woocommerce_after_order_notes', 'storeapps_after_order_notes', 10 );
function storeapps_after_order_notes() {
echo '<h2>woocommerce_after_order_notes</h2>';
}
13. woocommerce_checkout_after_customer_details
The hook is placed after completing the customer details i.e after the billing & shipping fields.
add_action( 'woocommerce_checkout_after_customer_details', 'storeapps_checkout_after_customer_details', 10 );
function storeapps_checkout_after_customer_details() {
echo '<h2>woocommerce_checkout_after_customer_details</h2>';
}
14. woocommerce_checkout_before_order_review_heading
This hook is defined in the checkout template before the order review heading i.e “Your Order”. This hook was added in WooCommerce v3.6.0.
add_action('woocommerce_checkout_before_order_review_heading', 'storeapps_checkout_before_order_review_heading');
function storeapps_checkout_before_order_review_heading() {
echo '<h2>woocommerce_checkout_before_order_review_heading</h2>';
}
15. woocommerce_checkout_order_review
The hook is defined in the main checkout template. The order review table template is included using this hook.
add_action('woocommerce_checkout_order_review', 'storeapps_checkout_order_review');
function storeapps_checkout_order_review() {
echo '<h2>woocommerce_checkout_order_review</h2>';
}
16. woocommerce_checkout_before_order_review
This hook is defined before the order details on the checkout page.
add_action( 'woocommerce_checkout_before_order_review', 'storeapps_checkout_before_order_review', 10 );
function storeapps_checkout_before_order_review() {
echo '<h2>woocommerce_checkout_before_order_review</h2>';
}
17. woocommerce_review_order_before_cart_contents
This hook is defined inside the order table body before the content.
add_action( 'woocommerce_review_order_before_cart_contents', 'storeapps_review_order_before_cart_contents', 10 );
function storeapps_review_order_before_cart_contents() {
echo '<h2>woocommerce_review_order_before_cart_contents</h2>';
}
18. woocommerce_review_order_after_cart_contents
This hook is defined inside the order table body after all the content.
add_action( 'woocommerce_review_order_after_cart_contents', 'storeapps_review_order_after_cart_contents', 10 );
function storeapps_review_order_after_cart_contents() {
echo '<h2>woocommerce_review_order_after_cart_contents</h2>';
}
19. woocommerce_review_order_before_shipping
This hook is defined before the shipping section in the order table.
add_action( 'woocommerce_review_order_before_shipping', 'storeapps_review_order_before_shipping', 10 );
function storeapps_review_order_before_shipping() {
echo '<h2>woocommerce_review_order_before_shipping</h2>';
}
20. woocommerce_review_order_after_shipping
This hook is defined after the shipping section in the order details table.
add_action( 'woocommerce_review_order_after_shipping', 'storeapps_review_order_after_shipping', 10 );
function storeapps_review_order_after_shipping() {
echo '<h2>woocommerce_review_order_after_shipping</h2>';
}
21. woocommerce_review_order_before_order_total
This hook is defined before the total section & after the shipping section in the order details table.
add_action( 'woocommerce_review_order_before_order_total', 'storeapps_review_order_before_order_total', 10 );
function storeapps_review_order_before_order_total() {
echo '<h2>woocommerce_review_order_before_order_total</h2>';
}
22. woocommerce_review_order_after_order_total
This hook is defined after the total section & in the order details table.
add_action( 'woocommerce_review_order_after_order_total', 'storeapps_review_order_after_order_total', 10 );
function storeapps_review_order_after_order_total() {
echo '<h2>woocommerce_review_order_after_order_total</h2>';
}
23. woocommerce_review_order_before_payment
This hook is defined before the payments methods section on the checkout page.
add_action( 'woocommerce_review_order_before_payment', 'storeapps_review_order_before_payment', 10 );
function storeapps_review_order_before_payment() {
echo '<h2>woocommerce_review_order_before_payment</h2>';
}
24. woocommerce_review_order_before_submit
This hook is defined before the ‘Place order’ button on the checkout page.
add_action( 'woocommerce_review_order_before_submit', 'storeapps_review_order_before_submit', 10 );
function storeapps_review_order_before_submit() {
echo '<h2>woocommerce_review_order_before_submit</h2>';
}
25. woocommerce_review_order_after_submit
This hook is defined after the ‘Place order’ button on the checkout page.
add_action( 'woocommerce_review_order_after_submit', 'storeapps_review_order_after_submit', 10 );
function storeapps_review_order_after_submit() {
echo '<h2>woocommerce_review_order_after_submit</h2>';
}
26. woocommerce_review_order_after_payment
This hook is defined after the whole payment section including the ‘Place order’ button.
add_action( 'woocommerce_review_order_after_payment', 'storeapps_review_order_after_payment', 10 );
function storeapps_review_order_after_payment() {
echo '<h2>woocommerce_review_order_after_payment</h2>';
}
27. woocommerce_checkout_after_order_review
This hook is defined after the order review section on the checkout page which includes the order details table & payment section.
add_action( 'woocommerce_checkout_after_order_review', 'storeapps_checkout_after_order_review', 10 );
function storeapps_checkout_after_order_review() {
echo '<h2>woocommerce_checkout_after_order_review</h2>';
}
28. woocommerce_after_checkout_form
This hook is defined at the end of the checkout form.
add_action( 'woocommerce_after_checkout_form', 'storeapps_after_checkout_form', 10 );
function storeapps_after_checkout_form() {
echo '<h2>woocommerce_after_checkout_form</h2>';
}
Removing the default actions on the checkout page
By default only some of the hooks are used by WooCommerce to add:
- login form before checkout form (woocommerce_checkout_login_form)
- coupon form before checkout form (woocommerce_checkout_coupon_form)
- order review table to the order review section (woocommerce_order_review)
- payments table also to the order review section (woocommerce_checkout_payment)
This code can be easily removed as shown below. You can also refer to this doc on safely adding WordPress code snippets.
/** * Remove default WooCommerce checkout hooks */ remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 ); remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 ); remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 ); remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
Custom checkout field editor in WooCommerce
The above examples show how to add some texts with simple code snippets to the WooCommerce checkout page.
But what about custom checkout fields? Custom coding would require a lot more work.
With the help of Cashier, you can edit/add/remove core WooCommerce fields and also add custom fields for the shipping, billing and additional fields section.
Cashier also provides one page checkout, direct checkout, side cart, frequently bought together and other enhancements.
Wrapping up
Hope this guide helped you cover all the crucial WooCommerce checkout hooks.
Use them to make your online store’s checkout page better. The bottom line is that a checkout page is like a gateway to your customers and these hooks can enhance your store’s overall user experience if used wisely.
And for more checkout optimization, WooCommerce checkout plugins are always there for your assistance.