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 helps every WooCommerce developer to navigate through hooks 😊.
👉🏿 You can find it here: Checkout hooks list
Table of contents
- WooCommerce Checkout Hook Visual Guide
- Checkout hooks list
- Remove the default actions on the checkout page (example)
- Add new sections to the checkout page (code)
- Custom Fields in WooCommerce Checkout Page (plugin)
👇🏻 Below you will find all hooks available on 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 it in one column.
The plugin lets you add, remove, and manage existing WooCommerce checkout fields in minutes 💪! Let's go back to the list of checkout hooks.
WooCommerce Checkout Hooks - Visual Guide
Checkout hooks list
Remove the default actions on the checkout page (example)
👉🏽 By default, some hooks are used by WooCommerce to add:
- login form before checkout form (
- coupon form before checkout form (
- order review table to the order review section (
- payments table also to the order review section (
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 😊!
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 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 you might have. Just let us know in the comments.
One more thing. You may also use a FREE version of the plugin to customize the WooCommerce checkout easily 🎉!
Start customizing your WooCommerce checkout page today!