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 WooCommerce checkout hooks guide, to help every developer beginner or advanced to find the hooks he is looking for.
This is a first post in a WooCommerce Hooks Visual Guide series. Make sure to read every one of them to find out everything about WooCommerce hooks and where to find them.
WooCommerce Checkout Hooks - Visual Guide
Below you will find all hooks available in the WooCommerce checkout page. This guide is based on the official WooCommerce theme Storefront. To make the screenshot more readable I tweaked the checkout page to display in one column.
To see it in action on a live page, scroll to the live guide ↓
WooCommerce Checkout Hooks - Live Visual Guide
Apart from the static visual guide above we created the whole WooCommerce checkout experience on a live page, so you can view all hooks lice, click through the whole checkout process or even manipulate it with your developer tools in the browser.
Visit the live WooCommerce checkout hooks guide by clicking the button below:
See Checkout Hooks in Action →Remove the default actions on the checkout page
By default only some of the 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
You can also easy 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
The above examples show how to add some texts with simple code snippets to the WooCommerce checkout page. 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.
You can add fields to the default billing or shipping sections, but also to all other available with WooCommerce checkout hooks. Sweet! Try it!
Custom fields in WooCommerce checkout
The best looking Checkout Fields plugin. Add, edit, remove WooCommerce checkout fields with a visual interface. Customize your WooCommerce checkout.
Add to cart or View DetailsDid these examples work for you?
Did you try to use the code snippets that I provided above? Do you use our Flexible Checkout Fields plugin and have some questions? We will try to help and answer any questions about WooCommerce checkout hooks that you might have. Just let us know in the comments.
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