Search the site:

Home Blog WooCommerce Checkout Page Hooks: Visual Guide with Code Snippets

WooCommerce Checkout Page Hooks: Visual Guide with Code Snippets

This post has been updated with the latest WooCommerce Checkout page hooks as of WooCommerce version 3.6.4.

WooCommerce has lots of different hooks for their product pages, cart page & checkout page. These hooks help us to add our content in different places on these pages. We saw the different cart page hooks in an earlier post.

In this post, we will learn about different WooCommerce Checkout page hooks and where they are placed on the page. I have used the WooCommerce’s Storefront theme in the visual guide & examples below with WooCommerce version 3.6.4 .

Checkout

woocommerce_before_checkout_form

woocommerce_checkout_before_customer_details

woocommerce_checkout_billing

Billing details

woocommerce_before_checkout_billing_form

woocommerce_after_checkout_billing_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

Your order

woocommerce_checkout_before_order_review

woocommerce_checkout_order_review

Product Total
woocommerce_review_order_before_cart_contents
Lord of the Rings
× 1
$600.00
woocommerce_review_order_after_cart_contents
Subtotal $600.00
woocommerce_review_order_before_shipping
Shipping Flat rate: $20.00
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
Total $620.00
woocommerce_review_order_after_order_total

woocommerce_review_order_before_payment

  • Please send a check to Store Name, Store Street, Store Town, Store State / County, Store Postcode.

  • Pay with cash upon delivery.


woocommerce_review_order_before_submit

woocommerce_review_order_after_submit

woocommerce_review_order_after_payment

woocommerce_checkout_after_order_review

woocommerce_after_checkout_form

The WooCommerce Checkout Page has following hooks:

  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

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 checkout page.

2. woocommerce_checkout_before_customer_details

The woocommerce_checkout_before_customer_details hook is defined in the checkout form just before the customer details.

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.

4. woocommerce_before_checkout_billing_form

The woocommerce_before_checkout_billing_form hook is defined before the start of the billing form.

5. woocommerce_after_checkout_billing_form

The woocommerce_after_checkout_billing_form hook is defined after the completion of billing form.

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.

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.

8. woocommerce_checkout_shipping

The woocommerce_checkout_shipping hook is defined in the shipping form template before the shipping form.

9. woocommerce_before_checkout_shipping_form

The woocommerce_before_checkout_shipping_form hook is defined just before the start of the shipping form.

10. woocommerce_after_checkout_shipping_form

The woocommerce_after_checkout_shipping_form hook is defined after the completion of the shipping form.

11. woocommerce_before_order_notes

The woocommerce_before_order_notes hook is defined before the order notes field on the checkout page.

12. woocommerce_after_order_notes

The woocommerce_after_order_notes hook is defined after the order notes field on the checkout page.

13. woocommerce_checkout_after_customer_details

The woocommerce_checkout_after_customer_details hook is placed after the completion of the customer details i.e after the billing & shipping fields.

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 i.e “Your Order”. This hook was added in WooCommerce v3.6.0.

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 usign this hook.

16. woocommerce_checkout_before_order_review

The woocommerce_checkout_before_order_review hook is defined before the order details on the checkout page.

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.

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.

19. woocommerce_review_order_before_shipping

The woocommerce_review_order_before_shipping hook is defined before the shipping section in the order table.

20. woocommerce_review_order_after_shipping

The woocommerce_review_order_after_shipping hook is defined after the shipping section in the order details table.

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.

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.

23. woocommerce_review_order_before_payment

The woocommerce_review_order_before_payment hook is defined before the payments methods section on the checkout page.

24. woocommerce_review_order_before_submit

The woocommerce_review_order_before_submit hook is defined before the ‘Place Order’ button on the checkout page.

25. woocommerce_review_order_after_submit

The woocommerce_review_order_after_submit hook is defined after the ‘Place order’ button on the checkout page.

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.

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 & payment section.

28. woocommerce_after_checkout_form

The woocommerce_after_checkout_form hook is defined at the end after the checkout form.

That’s it! WooCommerce provides all the necessary action hooks you would ever require to make your checkout page work as you need.

Browse more in: WooCommerce, WooCommerce Guide, WooCommerce How Tos, WooCommerce Tutorials

Leave a Reply

avatar

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

  Subscribe  
Notify of
from purchased

Subscribe Now