Search the site:

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

WooCommerce Checkout Page Hooks: Visual Guide with Code Snippets

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.2.6 .

Checkout

woocommerce_before_checkout_form

woocommerce_checkout_before_customer_details

Billing details

woocommerce_before_checkout_billing_form

woocommerce_after_checkout_billing_form

woocommerce_before_checkout_shipping_form

woocommerce_after_checkout_shipping_form

woocommerce_before_order_notes


woocommerce_after_order_notes

woocommerce_checkout_after_customer_details

Your order

woocommerce_checkout_before_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_before_checkout_billing_form
  4. woocommerce_after_checkout_billing_form
  5. woocommerce_before_checkout_shipping_form
  6. woocommerce_after_checkout_shipping_form
  7. woocommerce_before_order_notes
  8. woocommerce_after_order_notes
  9. woocommerce_checkout_after_customer_details
  10. woocommerce_checkout_before_order_review
  11. woocommerce_review_order_before_cart_contents
  12. woocommerce_review_order_after_cart_contents
  13. woocommerce_review_order_before_shipping
  14. woocommerce_review_order_after_shipping
  15. woocommerce_review_order_before_order_total
  16. woocommerce_review_order_after_order_total
  17. woocommerce_review_order_before_payment
  18. woocommerce_review_order_before_submit
  19. woocommerce_review_order_after_submit
  20. woocommerce_review_order_after_payment
  21. woocommerce_checkout_after_order_review
  22. 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_before_checkout_billing_form

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

4. woocommerce_after_checkout_billing_form

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

5. woocommerce_before_checkout_shipping_form

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

6. woocommerce_after_checkout_shipping_form

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

7. woocommerce_before_order_notes

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

8. woocommerce_after_order_notes

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

9. 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.

10. woocommerce_checkout_before_order_review

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

11. woocommerce_review_order_before_cart_contents

The woocommerce_review_order_before_cart_contents hook is defined inside the order table body before the content.

12. 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.

13. woocommerce_review_order_before_shipping

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

14. woocommerce_review_order_after_shipping

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

15. 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.

16. 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.

17. woocommerce_review_order_before_payment

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

18. woocommerce_review_order_before_submit

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

19. woocommerce_review_order_after_submit

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

20. woocommerce_review_order_after_payment

The woocommerce_review_order_after_payment hook is defined after the whole payment section including the ‘Place order’ button.

21. 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.

22. 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