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 .
The WooCommerce Checkout Page has following hooks:
The woocommerce_before_checkout_form hook is defined before the checkout form. It is placed above the coupon field on checkout page.
The woocommerce_checkout_before_customer_details hook is defined in the checkout form just before the customer details.
The woocommerce_before_checkout_billing_form hook is defined before the start of the billing form.
Increase WooCommerce Store Sales
"This fully customizable plugin has saved us $6,997.81 over the last 5 months in abandoned orders. If you’re on the fence, don’t think twice. Abandoned Cart Pro pays for itself really quickly." - Miroslav Mazalic
The woocommerce_after_checkout_billing_form hook is defined after the completion of billing form.
The woocommerce_before_checkout_shipping_form hook is defined just before the start of the shipping form.
The woocommerce_after_checkout_shipping_form hook is defined after the completion of the shipping form.
The woocommerce_before_order_notes hook is defined before the order notes field on the checkout page.
The woocommerce_after_order_notes hook is defined after the order notes field on the checkout page.
The woocommerce_checkout_after_customer_details hook is placed after the completion of the customer details i.e after the billing & shipping fields.
The woocommerce_checkout_before_order_review hook is defined before the order details on the checkout page.
The woocommerce_review_order_before_cart_contents hook is defined inside the order table body before the content.
The woocommerce_review_order_after_cart_contents hook is defined inside the order table body after all the content.
The woocommerce_review_order_before_shipping hook is defined before the shipping section in the order table.
The woocommerce_review_order_after_shipping hook is defined after the shipping section in the order details table.
The woocommerce_review_order_before_order_total hook is defined before the total section & after the shipping section in the order details table.
The woocommerce_review_order_after_order_total hook is defined after the total section & in the order details table.
The woocommerce_review_order_before_payment hook is defined before the payments methods section on the checkout page.
The woocommerce_review_order_before_submit hook is defined before the ‘Place Order’ button on the checkout page.
The woocommerce_review_order_after_submit hook is defined after the ‘Place order’ button on the checkout page.
The woocommerce_review_order_after_payment hook is defined after the whole payment section including the ‘Place order’ button.
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.
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.