Mastering WooCommerce Hooks: A Complete Guide

Before we start explaining how to use WooCommerce hooks, let’s say a few words about hooks. Hooks in WordPress allow you to add or modify code without editing the source files. Hence, they are very useful and enable developers to manipulate code easily.

There are two types of hooks in WordPress: Actions and Filters. Actions allow you to add code at specific points, while filters allow you to manipulate code and return a new value at the end of the process.

If you want to use a specific hook to change or add code, you can add it to the functions.php file. 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 you find it, you can manipulate the code and create a function that changes the value returned by the original function, as shown in the following example:

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 necessarily a single variable. To access those, you need to add additional parameters in the add_filter function. The reason is that the default number of variables is 1.

So, if you want to access additional values, you need to add the fourth parameter in the add_filter call. Here is an example of a filter hook with multiple variables:

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 you see in this code is the priority. With this parameter, you can control when the function will be executed.

This parameter is more relevant for action hooks than filters, as it allows you to control the order in which the code will be executed, assuming there are multiple functions “attached” to that specific hook.

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 use one of the default WordPress themes and make changes to the main shop page. The template remains unchanged except for the WooCommerce plugin installed on it. The version of WooCommerce is the latest at the time of writing this guide (3.6.2). Let’s start!

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' );

You can see that WooCommerce developers indicate that in the woocommerce_before_main_content hook, there is a call to several functions, one of which is woocommerce_breadcrumb, and the priority of this function is 20. To remove the breadcrumbs, add the following code to the functions.php file:

// 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' );
}

It’s worth noting that both pieces of code will work excellently. The only difference is how we wrote them. The first one overrides the variable with a new value and sends it, while the second one simply returns a new value.

3. Changing the Number of Products on the Shop Page

To change the number of products displayed on the shop page, you can use the following code. In this example, we set the maximum number of displayed products to be 9. If you want a different number, simply change the value:

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 );
}

Please note that we have set the priority of the function we added to be 40. Why? If you take a look at the archive-product.php file mentioned earlier, you will see that WooCommerce developers have already attached several functions to the woocommerce_before_shop_loop hook with priorities 10, 20, and 30:

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

In order to add this feature, you need to understand the global $product object and how to use it. As you can see in the code below, we are using the global variable $product. This variable is an object, and an object has several methods (functions).

We will use this object to check if the product is in stock using the is_in_stock method. This method returns a Boolean value (true or false) indicating whether the product is in stock or not, respectively.

If the condition passes and the product is in stock, we proceed. If not, we create the “Out of Stock” label. Here is the code that does this:

/**
 * 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' );

If you examine the function, you’ll see that WooCommerce developers directly generate the tag and do not provide any filter to change it.

So, there are two ways to approach this. The first is to override the function entirely in your theme’s functions.php file. Copy the following function from the WooCommerce plugin to your theme’s functions.php:

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

Simply change the class name in this function as desired, for example:

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

The second option is to remove the action attached to the hook from the plugin and attach your own function. This is the preferred option as it can prevent potential issues in future WooCommerce updates. The code looks like this:

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' );

Summary

Whether you noticed it or not, I’ve already written an article about hooks in WordPress. However, it might be a bit confusing, and truthfully, I think that from looking at these examples, you can better understand the power of hooks in WordPress.

The entire concept of WordPress is based on these hooks, and understanding them will take you a few steps forward in terms of development capabilities.

Either way, I promise to add interesting functions with which you can customize your digital store. If you have interesting functions that you think would fit the article, share them with us in the comments!