If you’re a WooCommerce user looking to optimize your checkout process and increase conversion rates, you’re in the right place. This is a complete guide to WooCommerce checkout hooks.
In this post, you will learn how to use checkout hooks in WooCommerce. I will show you how they can be instrumental in customizing your checkout page.
By leveraging these hooks effectively, you’ll have the power to tailor your customers’ checkout experience, ultimately driving higher conversion rates for your online store.
So, let’s dive in and explore the possibilities of WooCommerce checkout hooks together.
Stick to the end, as we will look at the main hooks and give you examples of what you can do with them. They help you to customize the checkout page to boost your conversion rates.
WooCommerce Hooks
Hooks are powerful functions that allow you to alter or add code without modifying the core files. They provide a lot of flexibility, and developers use them to change WooCommerce default functionalities.
You should note that there are two types of different hooks:
- Action hooks – They allow you to add custom code to do certain actions when an event occurs.
- Filter hooks – They change the behavior of an existing variable or function.
WooCommerce Checkout Hooks
Hooks help developers to create customized solutions practically and flexibly. Checkout hooks are one type of several hooks supported by WooCommerce. Checkout hooks can be used to add some content before the billing fields, apply some logic to increase the price or limit users by role, before order review or after the checkout form, and many more.
You should take note that WooCommerce hooks work exactly like WordPress native hooks. Before we start, I highly recommend creating a child theme so that your changes are not lost.
The WooCommerce Checkout Page has the following hooks:
1. woocommerce_before_checkout_form
The woocommerce_before_checkout_form hook is defined before the checkout form. It is placed above the coupon field on the checkout page.
add_action( 'woocommerce_before_checkout_form', 'njengah_before_checkout_form', 10 );
function njengah_before_checkout_form(){
echo '<h2>woocommerce_before_checkout_form</h2>';
}
2. woocommerce_checkout_before_customer_details
The woocommerce_checkout_before_customer_details hook is defined in the checkout form just before the customer details.
add_action( 'woocommerce_checkout_before_customer_details', 'njengah_checkout_before_customer_details', 10 );
function njengah_checkout_before_customer_details(){
echo '<h2>woocommerce_checkout_before_customer_details</h2>';
}
3. woocommerce_checkout_billing
The woocommerce_checkout_billing is a new hook added to checkout page. The billing form template on the checkout page is included using this hook.
add_action('woocommerce_checkout_billing', 'njengah_checkout_billing');
function njengah_checkout_billing() {
echo '<h2>woocommerce_checkout_billing</h2>';
}
4. woocommerce_before_checkout_billing_form
The woocommerce_before_checkout_billing_form hook is defined before the start of the billing form.
add_action( 'woocommerce_before_checkout_billing_form', 'njengah_before_checkout_billing_form', 10 );
function njengah_before_checkout_billing_form(){
echo '<h2>woocommerce_before_checkout_billing_form</h2>';
}
5. woocommerce_after_checkout_billing_form
The woocommerce_after_checkout_billing_form hook is defined after the completion of billing form.
add_action( 'woocommerce_after_checkout_billing_form', 'njengah_after_checkout_billing_form', 10 );
function njengah_after_checkout_billing_form(){
echo '<h2>woocommerce_after_checkout_billing_form</h2>';
}
6. woocommerce_before_checkout_registration_form
The woocommerce_before_checkout_registration_form 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', 'njengah_checkout_billing');
function njengah_checkout_billing() {
echo '<h2>woocommerce_before_checkout_registration_form</h2>';
}
7. woocommerce_after_checkout_registration_form
The woocommerce_after_checkout_registration_form hook is defined in the billing form template. This will be executed for the guest users.
add_action('woocommerce_after_checkout_registration_form', 'njengah_after_checkout_registration_form');
function njengah_after_checkout_registration_form() {
echo '<h2>woocommerce_after_checkout_registration_form</h2>';
}
8. woocommerce_checkout_shipping
The woocommerce_checkout_shipping hook is defined in the shipping form template before the shipping form.
add_action('woocommerce_checkout_shipping', 'njengah_checkout_shipping');
function njengah_checkout_shipping() {
echo '<h2>woocommerce_checkout_shipping</h2>';
}
9. woocommerce_before_checkout_shipping_form
The woocommerce_before_checkout_shipping_form hook is defined just before the start of the shipping form.
add_action( 'woocommerce_before_checkout_shipping_form', 'njengah_before_checkout_shipping_form', 10 );
function njengah_before_checkout_shipping_form(){
echo '<h2>woocommerce_before_checkout_shipping_form</h2>';
}
10. woocommerce_after_checkout_shipping_form
The woocommerce_after_checkout_shipping_form hook is defined after the completion of the shipping form.
add_action( 'woocommerce_after_checkout_shipping_form', 'njengah_after_checkout_shipping_form', 10 );
function njengah_after_checkout_shipping_form(){
echo '<h2>woocommerce_after_checkout_shipping_form</h2>';
}
11. woocommerce_before_order_notes
The woocommerce_before_order_notes hook is defined before the order notes field on the checkout page.
add_action( 'woocommerce_before_order_notes', 'njengah_before_order_notes', 10 );
function njengah_before_order_notes(){
echo '<h2>woocommerce_before_order_notes</h2>';
}
12. woocommerce_after_order_notes
The woocommerce_after_order_notes hook is defined after the order notes field on the checkout page.
add_action( 'woocommerce_after_order_notes', 'njengah_after_order_notes', 10 );
function njengah_after_order_notes(){
echo '<h2>woocommerce_after_order_notes</h2>';
}
13. woocommerce_checkout_after_customer_details
The woocommerce_checkout_after_customer_details hook is placed after the completion of the customer details that is after the billing & shipping fields.
add_action( 'woocommerce_checkout_after_customer_details', 'njengah_checkout_after_customer_details', 10 );
function njengah_checkout_after_customer_details(){
echo '<h2>woocommerce_checkout_after_customer_details</h2>';
}
14. woocommerce_checkout_before_order_review_heading
The woocommerce_checkout_before_order_review_heading hook is defined in the checkout template before the order review heading that is “Your Order”. This hook was added in WooCommerce v3.6.0.
add_action('woocommerce_checkout_before_order_review_heading', 'njengah_checkout_before_order_review_heading');
function njengah_checkout_before_order_review_heading() {
echo '<h2>woocommerce_checkout_before_order_review_heading</h2>';
}
15. woocommerce_checkout_order_review
The woocommerce_checkout_order_review hook is defined in the main checkout template. The order review table template is included using this hook.
add_action('woocommerce_checkout_order_review', 'njengah_checkout_order_review');
function njengah_checkout_order_review() {
echo '<h2>woocommerce_checkout_order_review</h2>';
}
16. woocommerce_checkout_before_order_review
The woocommerce_checkout_before_order_review hook is defined before the order details on the checkout page.
add_action( 'woocommerce_checkout_before_order_review', 'njengah_checkout_before_order_review', 10 );
function njengah_checkout_before_order_review(){
echo '<h2>woocommerce_checkout_before_order_review</h2>';
}
17. woocommerce_review_order_before_cart_contents
The woocommerce_review_order_before_cart_contents hook is defined inside the order table body before the content.
add_action( 'woocommerce_review_order_before_cart_contents', 'njengah_review_order_before_cart_contents', 10 );
function njengah_review_order_before_cart_contents(){
echo '<h2>woocommerce_review_order_before_cart_contents</h2>';
}
18. woocommerce_review_order_after_cart_contents
The woocommerce_review_order_after_cart_contents hook is defined inside the order table body after all the content.
add_action( 'woocommerce_review_order_after_cart_contents', 'njengah_review_order_after_cart_contents', 10 );
function njengah_review_order_after_cart_contents(){
echo '<h2>woocommerce_review_order_after_cart_contents</h2>';
}
19. woocommerce_review_order_before_shipping
The woocommerce_review_order_before_shipping hook is defined before the shipping section in the order table.
add_action( 'woocommerce_review_order_before_shipping', 'njengah_review_order_before_shipping', 10 );
function njengah_review_order_before_shipping(){
echo '<h2>woocommerce_review_order_before_shipping</h2>';
}
20. woocommerce_review_order_after_shipping
The woocommerce_review_order_after_shipping hook is defined after the shipping section in the order details table.
add_action( 'woocommerce_review_order_after_shipping', 'njengah_review_order_after_shipping', 10 );
function njengah_review_order_after_shipping(){
echo '<h2>woocommerce_review_order_after_shipping</h2>';
}
21. woocommerce_review_order_before_order_total
The woocommerce_review_order_before_order_total hook is defined before the total section & after the shipping section in the order details table.
add_action( 'woocommerce_review_order_before_order_total', 'njengah_review_order_before_order_total', 10 );
function njengah_review_order_before_order_total(){
echo '<h2>woocommerce_review_order_before_order_total</h2>';
}
22. woocommerce_review_order_after_order_total
The woocommerce_review_order_after_order_total hook is defined after the total section & in the order details table.
add_action( 'woocommerce_review_order_after_order_total', 'njengah_review_order_after_order_total', 10 );
function njengah_review_order_after_order_total(){
echo '<h2>woocommerce_review_order_after_order_total</h2>';
}
23. woocommerce_review_order_before_payment
The woocommerce_review_order_before_payment hook is defined before the payments methods section on the checkout page.
add_action( 'woocommerce_review_order_before_payment', 'njengah_review_order_before_payment', 10 );
function njengah_review_order_before_payment(){
echo '<h2>woocommerce_review_order_before_payment</h2>';
}
24. woocommerce_review_order_before_submit
The woocommerce_review_order_before_submit hook is defined before the ‘Place Order’ button on the checkout page.
add_action( 'woocommerce_review_order_before_submit', 'njengah_review_order_before_submit', 10 );
function njengah_review_order_before_submit(){
echo '<h2>woocommerce_review_order_before_submit</h2>';
}
25. woocommerce_review_order_after_submit
The woocommerce_review_order_after_submit hook is defined after the ‘Place order’ button on the checkout page.
add_action( 'woocommerce_review_order_after_submit', 'njengah_review_order_after_submit', 10 );
function njengah_review_order_after_submit(){
echo '<h2>woocommerce_review_order_after_submit</h2>';
}
26. woocommerce_review_order_after_payment
The woocommerce_review_order_after_payment hook is defined after the whole payment section including the ‘Place Order’ button.
add_action( 'woocommerce_review_order_after_payment', 'njengah_review_order_after_payment', 10 );
function njengah_review_order_after_payment(){
echo '<h2>woocommerce_review_order_after_payment</h2>';
}
27. woocommerce_checkout_after_order_review
The woocommerce_checkout_after_order_review hook is defined after the order review section on the checkout page, which includes the order details table, and the payment section.
add_action( 'woocommerce_checkout_after_order_review', 'njengah_checkout_after_order_review', 10 );
function njengah_checkout_after_order_review(){
echo '<h2>woocommerce_checkout_after_order_review</h2>';
}
28. woocommerce_after_checkout_form
The woocommerce_after_checkout_form hook is defined at the end after the checkout form.
add_action( 'woocommerce_after_checkout_form', 'njengah_after_checkout_form', 10 );
function njengah_after_checkout_form(){
echo '<h2>woocommerce_after_checkout_form</h2>';
}
Conclusion
This post illustrates all the WooCommerce hooks that are available on the checkout page. These hooks allow you to customize the checkout page according to your needs.
If this is your first time with hooks, you can copy these scripts and paste them directly into the functions.php file of your Child Theme. You can now get creative and customize the checkout page to increase conversion rates.
Alternatively, you can use plugins to customize this section if you are not familiar with the codes. If you need further customization, please consider hiring a qualified WordPress developer.
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
Similar Articles
- What is WooCommerce Storefront Theme? [Answered]
- How to Put WooCommerce Cart and Checkout on One Page
- How to Add Extra Field in WooCommerce Checkout Form
- How to Customize Storefront Checkout Page
- How to Remove Cart Page WooCommerce Storefront Theme
- How to Hide Tax On Checkout If Field Value Exists WooCommerce
- How o Hide Company Name Field WooCommerce Checkout Page
- How to Remove the Checkout Button WooCommerce
- How to Change Quantity In Checkout WooCommerce
- How to Remove Additional Information Checkout Page WooCommerce