WooCommerce is extremely friendly for developers because it has a ton of actions and filters - or just hooks. We use them often when we develop WooCommerce plugins or tweak our checkout process, here at WP Desk. That's why we created this article about WooCommerce checkout page hooks. We hope that this visual hook guide and the hook list helps every WooCommerce developer to navigate through hooks 😊.
Contents
- WooCommerce Checkout Page Hooks - Visual Guide
- WooCommerce checkout page hooks list
- Remove the default actions on the checkout page (example)
- Add your own sections to the checkout page (code)
- Custom Fields in WooCommerce Checkout Page (plugin)
- Did these examples work for you?
- WooCommerce Cart Page Hooks - A Visual Guide (code examples)
- WooCommerce Checkout - Settings, Shortcode & Configuration Guide
- Customize the WooCommerce Checkout Page: Tips & Tools for Success
- WooCommerce Checkout Page: settings, missing options & errors
- Customize the WooCommerce Checkout Page: Top Tips for a Seamless Experience
Custom fields in WooCommerce checkout
Free plugin to customize your WooCommerce checkout. You don't have to use WooCommerce hooks to build custom solutions to add checkout fields.
💾 Active Installations: 80,000+ | WordPress Rating:
WooCommerce Checkout Page Hooks - Visual Guide
WooCommerce checkout page hooks list
woocommerce_before_checkout_formwoocommerce_checkout_before_customer_detailswoocommerce_checkout_billingwoocommerce_before_checkout_billing_formwoocommerce_after_checkout_billing_formwoocommerce_before_checkout_registration_formwoocommerce_after_checkout_registration_formwoocommerce_checkout_shippingwoocommerce_before_checkout_shipping_formwoocommerce_after_checkout_shipping_formwoocommerce_before_order_noteswoocommerce_after_order_noteswoocommerce_checkout_after_customer_detailswoocommerce_checkout_before_order_review_headingwoocommerce_checkout_order_reviewwoocommerce_checkout_before_order_reviewwoocommerce_review_order_before_cart_contentswoocommerce_review_order_after_cart_contentswoocommerce_review_order_before_shippingwoocommerce_after_shipping_ratewoocommerce_review_order_after_shippingwoocommerce_review_order_before_order_totalwoocommerce_review_order_after_order_totalwoocommerce_review_order_before_paymentwoocommerce_checkout_before_terms_and_conditionswoocommerce_checkout_after_terms_and_conditionswoocommerce_review_order_before_submitwoocommerce_review_order_after_submitwoocommerce_review_order_after_paymentwoocommerce_checkout_after_order_reviewwoocommerce_after_checkout_form
Remove the default actions on the checkout page (example)
👉🏽 By default, some hooks are used by WooCommerce to add:
- login form before checkout form (
woocommerce_checkout_login_form) - coupon form before checkout form (
woocommerce_checkout_coupon_form) - order review table to the order review section (
woocommerce_order_review) - payments table also to the order review section (
woocommerce_checkout_payment)
You can easily remove these sections by pasting the following code to the functions.php file in your theme or preferably child theme ⚙️.
Add your own sections to the checkout page (code)
👉🏽 You can also easily add some texts or sections to the checkout page and you do not need to edit WooCommerce templates! The following easy example shows how to add "hello" text above the checkout form like this:
Custom Fields in WooCommerce Checkout Page (plugin)
The above examples show how to add some texts with simple code snippets to the checkout page using hooks. But what about custom checkout fields?
Doing this with custom coding would require much more work, but luckily there is a plugin that will help you add custom fields to any available custom sections in the WooCommerce checkout, without using a hook and custom code.
You can add fields to the default billing or shipping sections, but also those available with WooCommerce checkout hooks.
Sweet! Try it 😊!
Custom fields in WooCommerce checkout
Free plugin to customize your WooCommerce checkout. You don't have to use WooCommerce hooks to build custom solutions to add checkout fields.
💾 Active Installations: 80,000+ | WordPress Rating:
Did these examples work for you?
Did you try to use the code snippets that I provided above? Do you use our Flexible Checkout Fields PRO WooCommerce plugin and have some questions? We will try to help and answer any questions about WooCommerce checkout hooks or a specific hook from the visual guide or the list you might have. Just let us know in the comments.
You may also check out the plugin features (free and pro) in the plugin documentation.
Hello I have a question about hooks… I need to move "Payment Methods" between: 1) Delivery –> payment methods
Hello, I use the plugin Flexible Checkout Fields and there is one thing i like to be changed if possible. I use it for a Bakkery Store were people can order bread and cake and that kind of things. When they order they can choose to deliver the goods or to pick it up. But when they choose it i like to change the way the delivery costs are showing. In example if they choose to pick it up i do not want to show the possibility to send the goods, and the other way arround if they want the goods to be delivered i do not want to show the possiblity to pick the goods up. Can you help me with that? Kind Regards, Jan de Jong
visual guide link https://hooks.wpdesk.org/checkout/ return 404
visual guide link https://hooks.wpdesk.org/checkout/ return 404