Mastering WooCommerce Hooks: A Complete Guide

Before diving into WooCommerce hooks, let’s briefly cover how hooks work. Hooks in WordPress allow you to add or modify code without editing the source files, making them essential for developers.

There are two types of hooks in WordPress: Actions and Filters. Actions allow you to add code at specific points. Filters allow you to manipulate data and return a modified value.

Before you continue, it’s important to know how to create a child theme.

How to Use Hooks and Filters?

To use action hooks, you need to find or know the point where the hook is executed in the template or plugin files and find its unique name. The action point will look like this:

do_action('action_name');

Now that you know the hook’s name, you can easily add your own code to be executed at that point (in this hook):

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name() {
    // Your custom code goes here
    }
    add_action( 'action_name', 'your_function_name' );
}

Filters are called throughout the code using the following code:

apply_filters( 'filter_name', $variable );

Similar to finding the action name, you need to find the filter name to use it. Once found, you can create a function that modifies the returned value:

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name( $variable ) {
        // Your custom code goes here
        return $variable;
    }
    add_filter( 'filter_name', 'your_function_name' );
}

Note – for filters, it’s crucial to return some value!

Filter hooks can receive multiple variables, not just one. The default accepted argument count is 1, so to access additional values, specify the count as the fourth parameter in add_filter:

apply_filter( 'filter_name', $variable1, $variable2, $variable3 );

And here is the function with which we manipulate the code and return a new value (in our case, the sum of the three variables):

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name( $variable1, $variable2, $variable3 ) {
        // Example custom code
        $new_value = $variable1 + $variable2 + $variable3;
        return $new_value;
    }
    add_filter( 'filter_name', 'your_function_name', 10, 3 );
}

Pay attention to the fourth parameter (the number 3) in the add_filter call.

The third parameter in the add_filter function is the priority. It controls the execution order when multiple functions are attached to the same hook. Lower numbers run first (default is 10).

Now that we’ve explained how hooks work in WordPress, let’s look at some useful tricks that allow us to override settings or templates of any WooCommerce plugin.

Manipulating WooCommerce with Hooks

For the sake of examples, we will make changes to the main shop page using WooCommerce hooks. The following examples work with current WooCommerce versions.

It’s needless to mention that I assume hooks exist not only for the shop page but for any existing page in WooCommerce.

1. Removing Breadcrumbs from the Shop Page

WooCommerce’s shop page is generated by the woocommerce/templates/archive-product.php file. If you take a look at it, you’ll find the following code:

/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action( 'woocommerce_before_main_content' );

The WooCommerce developers indicate that the woocommerce_before_main_content hook calls several functions, including woocommerce_breadcrumb with priority 20. To remove the breadcrumbs:

// Remove WooCommerce Breadcrumbs
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

2. Removing the Title on the Shop Page

To remove the title on the shop page, you can use the following code:

if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
    /**
     * Hide WooCommerce Shop page title
     */
    function hide_woocommerce_page_title( $visibility ) {
        // Default $visibility value is true
        $visibility = false;
        return $visibility;
    }
    add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}

In the same way and in a simpler manner, you can use the following code:

if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
    /**
     * Hide WooCommerce page title
     */
    function hide_woocommerce_page_title() {
        return false;
    }
    add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}

Both approaches work. The first overrides the variable with a new value, while the second simply returns false directly.

3. Changing the Number of Products on the Shop Page

To change the number of products displayed on the shop page, use the following code. Change the return value to your desired number:

if ( ! function_exists( 'change_woocommerce_products_per_page' ) ) {
    /**
     * Change number of products on main shop page
     */
    function change_woocommerce_products_per_page()
    {
        return 9;
    }

    add_filter('loop_shop_per_page', 'change_woocommerce_products_per_page', 8);

}

4. Wrapping Products in the Shop with Any HTML Element

To add additional markup around the list of products on the shop page, we need to use two functions. The first one adds an opening div before the list, and the second one adds the closing div at the end.

if ( ! function_exists( 'additional_markup_before_products' ) ) {
    /**
     * Adding additional markup before product list
     */
    function additional_markup_before_products() {
        echo '<div class="my-custom-class"><h1>' .esc_html__( 'Custom Title Before Products' ) . '</h1>';
    }
    add_action( 'woocommerce_before_shop_loop', 'additional_markup_before_products', 40 );
}

Note that we set the priority to 40 because WooCommerce already attaches functions to woocommerce_before_shop_loop with priorities 10, 20, and 30. Our function runs after those:

if ( ! function_exists( 'additional_markup_after_products' ) ) {
    /**
     * Adding additional markup after product list
     */
    function additional_markup_after_products() {
        echo '</div>';
    }
    add_action( 'woocommerce_after_shop_loop', 'additional_markup_after_products', 5 );
}

5. Adding the “Out of Stock” label to an [Out of Stock] product

This example uses the global $product object and its is_in_stock() method to check if the product is in stock. If it’s not, we display an “Out of Stock” badge:

/**
 * Adding sold badge for product item
 */
if (!function_exists('add_sold_badge_mark')) {

    function add_sold_badge_mark()
    {
        global $product;
        if (!$product->is_in_stock()) {
            echo '<span class="out-of-stock">' . esc_html__('Sold') . '</span>';
        }
    }
    add_action('woocommerce_before_shop_loop_item_title', 'add_sold_badge_mark');
}

Take a look at the following post if you’re interested: How to Handle SEO and User Experience for Out-of-Stock Products.

6. Change the Product Title Markup

If you look at the content-product.php file, you’ll see that the product title is added through the woocommerce_shop_loop_item_title hook using the woocommerce_template_loop_product_title function:

/**
* Hook: woocommerce_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );

The function directly generates the HTML tag without providing a filter to change it. There are two approaches:

Option 1: Override the function entirely. Copy it from WooCommerce to your theme’s functions.php:

function woocommerce_template_loop_product_title() {
    echo '<h2 class="woocommerce-loop-product__title">' . get_the_title() . '</h2>';
}

Then change the class name as desired:

function woocommerce_template_loop_product_title() {
    echo '<h2 class="savvy-title">' . get_the_title() . '</h2>';
}

Option 2 (recommended): Remove the original action and attach your own function. This avoids conflicts with future WooCommerce updates:

if ( ! function_exists( 'add_product_item_title' ) ) {
    /**
     * Adding product item title markup
     */
    function add_product_item_title() {
        echo '<h4 class="my-product-item-title">' . get_the_title() . '</h4>';
    }
    add_action( 'woocommerce_shop_loop_item_title', 'add_product_item_title' );
}
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title' );

FAQs

Summary

WooCommerce hooks are the foundation for customizing your online store without modifying core plugin files. By understanding the difference between actions and filters, and how priority controls execution order, you can modify virtually any aspect of WooCommerce.

For a deeper understanding of hooks in general, check out our guide on WordPress hooks. The key takeaway: always use hooks instead of editing WooCommerce templates directly, and place your customizations in a plugin for long-term maintainability.