WooCommerce Hooks: Introduction, Tutorial

WooCommerce has more than 5 million downloads, making it the most popular eCommerce plugin for WordPress. It’s open-source, free, and secure. And, most importantly for developers, it’s easily customizable. The main tool for that customization is hooks. This article explains what they are, why you’d use them, and how to work with them, with a short reference list of common WooCommerce hooks at the end.

WordPress hooks: introduction

Without hooks, customizing a WooCommerce site means touching core plugin files. That creates several problems:

• Editing core files is risky and time-consuming.
• The same manual work has to be repeated every time you make a change.
• Switching themes wipes out everything you’ve added, and you have to start over.

Hooks solve all of this. Customization happens in your own code, attached to specific points in the WooCommerce codebase. When you change themes, your hooks stay active. All WooCommerce hooks work with any eCommerce theme.

Think of a hook as a named attachment point in the code. Your snippet “hooks onto” that point, runs when triggered, and leaves the core plugin files completely untouched.

WooCommerce hooks illustrated

A simple example is the wp_head function:

<?php wp_head() ?>

Using add_action( ‘wp_head’, ‘your_function’ ), you can inject custom code into your site’s header. To see it in action, open your site, click View Page Source in your browser, then find the functions.php file and remove wp_head. Reload the page and you’ll notice the header design disappears or reverts to the theme default. There are two main types of hooks:

• Filters — modify the value of a variable before it’s returned. For example, you can change the text on a ‘Sign In’ or ‘Add to Cart’ button, or remove a field you don’t need.
• Actions — insert new functionality at the point in the code where the hook is placed. For example, you can add trust logos to the cart page.

Hooks exist across the entire WordPress system, not just WooCommerce. The official documentation lists them all, and every plugin typically adds its own custom hooks on top.

You can replace entire sets of default actions with your own, or override all default filter values. The result is a store that behaves exactly the way you need it to.

WooCommerce hooks: application example

A hook by itself does nothing. It’s just a named point in the code, waiting for something to be attached to it. Any WooCommerce hook works the same way as a WordPress hook. The difference is that WordPress hooks apply globally, while WooCommerce hooks are specific to shop-related functionality.

There are visual WooCommerce hooks (affecting layout and UX) and non-visual ones (affecting performance and backend logic). Here are some concrete examples of both.

Adding cart logos

This is a straightforward example of a visual WooCommerce cart hook. When you use the Action woocommerce_review_order_after_submit, a list of Trust Badges appears in the cart section.

The same approach works for the homepage, shop page, product cards, or the checkout. Here’s how to set it up step by step.

WordPress hooks tutorial

This process works with any WordPress-based plugin. Before starting, decide where to place the code: your child theme’s functions.php file, or a code snippet management plugin.

A snippet plugin is the better option. The most popular one is Code Snippets. It’s well-organized, lets you move snippets between themes, and lets you enable or disable individual snippets without touching the code. Just activate or delete them as needed.

Here’s how to add a hook using the Code Snippets plugin:

1. Add a new snippet and give it a clear, descriptive name.
2. Write the function based on the WooCommerce documentation.
3. Open the code editor and write or paste the hook code.
4. Choose where to run it: Run everywhere, Only in administration area, Only on site front-end, or Run once. Run everywhere works for most cases.
5. Keep each snippet focused on one task. It doesn’t affect performance, but it makes things much easier to find and manage later.

Once saved, the trust badges from the earlier example will appear on the page you targeted.

Action syntax

The structure from the official documentation looks like this:

add_action( 'action_name', 'your_function_name' );

function your_function_name() {
// Your code
}

To trigger it, use do_action(‘action_name’). Once the code is written, install it in the Snippet plugin as described above.

Filter syntax

Filters follow the same pattern, with one key difference: they must return a value.

add_filter( 'filter_name', 'your_function_name' );

function your_function_name( $variable ) {
// Your code
return $variable;
}

To trigger a filter, use apply_filters( ‘filter_name’, $variable );.

Popular WooCommerce hooks list and samples

Like any WordPress plugin, WooCommerce ships with a large set of default hooks. The official WooCommerce documentation lists all of them, with each one labeled A or F to indicate whether it’s an Action or a Filter.

Each entry includes a description and a code sample you can copy and paste directly. Browsing through them and testing a few is the fastest way to understand how they work.

The full list is extensive. Below are some common examples covering different sections of a typical store.

Removing the breadcrumbs

The breadcrumb trail shows the navigation path from the top-level page to the current one. In the default WordPress Twenty Seventeen theme, it looks like this:

It’s rendered by the woocommerce_breadcrumb function, hooked to woocommerce_before_main_content. To remove it, use remove_action to detach that function from the hook and the breadcrumbs disappear.

Hiding the title

This example uses a Filter instead of an Action.

You hide the title by changing the value of the hide_woocommerce_page_title variable from True to False. The title still exists in the markup but becomes invisible on the page.

Changing the number of products per page

Using the Filter change_woocommerce_products_per_page, you can set how many products appear on a single listing page. Set the number as the variable value. In this example, we use 8.

Result:

Switching element positions

To reorder elements within a template, you work with hook priorities. A higher priority number means the element appears lower. In the default WooCommerce setup, the price appears below the star rating.

To swap them, use remove_action to detach both, then re-attach them with add_action using swapped priority values. If the rating had priority 5 and the price had 10, swapping them gives you this result:

Checkout WooCommerce hooks

Here is a visual hook map for the checkout page. All the hook names are placed at the positions where they fire in the layout. To use any of them, apply the method described above.

The upper part covers heading hooks. The lower part covers the booking form and shipping details. The checkout page is one of the most important pages to get right visually, since a clean, trustworthy layout directly affects conversion.

If you’re unsure what a specific hook does, look it up in the WooCommerce docs by name. Each entry includes a description and a ready-to-use code sample.

Cart page hooks

Here is a visual hook map for the cart page. There are many options available, but you don’t need all of them. Pick only what your store requires — a leaner setup is easier to maintain and keeps the page fast.

WooCommerce plugin: other options

Hooks are just one part of what makes WooCommerce powerful. There’s also a large extension library covering payment gateways, shipping, subscriptions, and more. Each extension has documentation with installation steps, configuration guides, and FAQ.

If you’re building a WooCommerce store and want a theme that’s designed to work well with hooks and extensions from the start, WoodMart is worth a look. It’s built specifically for WooCommerce, with a flexible layout system, built-in performance optimizations, and compatibility with the major WooCommerce extensions. See it in action at the WoodMart demo.