WooCommerce Checkout Page Visual Hooks Guide 2024
Leave a comment / By John Cook
Below you will find a visual hooks guide to the WooCommerce checkout page. The WooCommerce checkout page visual hooks guide will allow you to quickly identify locations to add custom pieces of code to enhance the checkout experience or gather additional information.
When viewing the WooCommerce checkout page visual hooks guide you will notice a difference in colour for some areas. Sections with a white background will be updated with an Ajax call. Keep this in mind when adding content to prevent customisations doubling up on Ajax refresh.
woocommerce_before_checkout_form
Have a coupon? section
woocommerce_checkout_before_customer_details
Billing Details
woocommerce_before_checkout_billing_form
woocommerce_after_checkout_billing_form
Ship to a different address?
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 | |
| Test product × 1 | $14.99 |
woocommerce_review_order_after_cart_contents | |
| Subtotal | $14.99 |
woocommerce_review_order_before_shipping | |
| Shipping | |
woocommerce_review_order_after_shipping | |
woocommerce_review_order_before_order_total | |
| Total | $14.99 |
woocommerce_review_order_after_order_total | |
woocommerce_review_order_before_payment
-
Please deposit your funds directly into our bank account using your order ID as reference.
woocommerce_review_order_before_submit
woocommerce_review_order_after_submit
woocommerce_review_order_after_payment
woocommerce_checkout_after_order_review
woocommerce_after_checkout_form
WooCommerce Checkout Page Visual Hooks Guide 2024 Default Actions
// These are actions you can unhook/remove!
add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_output_all_notices', 10 );
add_action( 'woocommerce_checkout_billing', array( self::$instance, 'checkout_form_billing' ) );
add_action( 'woocommerce_checkout_shipping', array( self::$instance, 'checkout_form_shipping' ) );
add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );