A Comprehensive Guide on How To Use WooCommerce Hooks

WooCommerce is the best plugin for eCommerce websites for a reason. Everyone can easily install WooCommerce plugin, create tags and categories, add products or even display grouped products.

Before we start our guide on how to use hooks in WooCommerce, we will tell you something about hooks. Basically, WordPress hooks let you add or change code without having to edit any core files. As such, they are extremely handy snippets of code that developers can use to manipulate the code.

There are two hook types: actions and filters. Action allows you to add custom code at various points. Filter, on the other hand, allows you to manipulate, replace and return a new variable value at the end.

If you want to use a hook to change or add a custom code, you can add it inside the functions.php file that can be found in your theme’s folder. Or, if you want your changes to be saved with the theme’s update, then you can paste that code inside the child theme’s function.php folder. In order to do so, it is important that you know how to create a child theme first before continuing.

To use action hooks, first you need to search for a hook point inside the theme/plugin’s folder/file and find a unique hook name which will be used for custom code manipulation. The action hook that you will be using is do_action('action_name');.

Now that you found a hook name, you can add it here:

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

Filter hooks are called throughout are code by using apply_filter( 'filter_name', $variable );. In the same way that you found unique filter name for the action hook, you can start creating the custom function to override that variable:

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

It is important to note that you must return a value.

Filter hooks can pass several variables. For that case, you need to set additional parameters inside the add_filter function in order to access it. The reason for that is because WordPress developers set 1 as the default number of accepted variables. So, if you want to access to other variables, then you need to set the 4th parameter inside the function. An example would be the filter hook with several variables:

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

And here’s the corresponding function for it:

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

The 3rd parameter inside the add_filter function has priority. With this parameter, you can control when your function will be executed. This is a parameter that is more useful for action hook rather than for filter hook, because you can control where you will add a new code if there are several custom functions that used the same action hook.

Now that we explained how hooks work in WordPress, we will show you a few useful tricks about how to override the WooCommerce templates. For this purpose we will use the latest version of WordPress with Twenty Seventeen theme and with WooCommerce plugin’s current (3.5.4) version.

We will start from the main shop page:

As you can see, the default shop page has:

• Breadcrumbs
• Page title
• Result count and ordering
• Product list
• Pagination
• Sidebar (optional)

If you want to change or add a code here, first you need to go inside the plugin folder. You can do so by accessing woocommerce/templates/archive-product.php. Once you’re there, you have to check which hooks the authors of the plugin have implemented here.

In the next section, we will cover the following:

• How to remove breadcrumbs
• How to hide page title
• How to change the number of products for shop page
• How to wrap product list with custom markup
• How to add a sold badge on product item
• How to change product item title markup
• How to change positions of price and ratings
• Bonus: Theme with all essential shop functionalities

How to Remove Breadcrumbs

The custom code below removes woocommerce_breadcrumb function which adds breadcrumbs markup. We set priority to 20 because it’s a default priority value inside the plugin template file.

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

And now, we need to set the same one in order to remove that area.

// Remove breadcrumbs
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

How to Hide Page Title

To hide page title area on your shop page, you can use this custom code below.

if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
/**
* Hide WooCommerce 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' );
}

Or, you can make it simpler:

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

We have to emphasize that both of these codes are correct, the only difference being the way you write it. The first one overrides the passed variable value with the new one and sends it again to hook, while the second code just returns the new value.

How to Change the Number of Products for Shop Page

In order to change the number of products per page for the shop page, you can use this custom code below. In our example, we set the max number of products per page to 8. If you want a different number, just change this value.

if ( ! function_exists( 'change_woocommerce_products_per_page' ) ) {
/**
* Change number of products on main shop page
*/
function change_woocommerce_products_per_page() {
return 8;
}
add_filter( 'loop_shop_per_page', 'change_woocommerce_products_per_page', 20 );
}

How to Wrap Product List With Custom Markup

To add an additional markup around the product list items, you need to use two functions. The first one will add the code before the list, and the second one will add it after the list if you open an html tag (div for example) before the list.

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

As you can see in the code above, we set priority to 40 because the authors of the WooCommerce plugin already used this action hook to add some markups with predefined priorities:

@hooked woocommerce_output_all_notices - 10
@hooked woocommerce_result_count - 20
@hooked woocommerce_catalog_ordering - 30

Because of that, we will check which function has the last priority (to add our code only around the list). In this case, it’s the woocommerce_catalog_ordering function. Then, we will just set a higher value.

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

We will do the same thing for the after markup priority. By default, there is a function that is added to this action.

@hooked woocommerce_pagination - 10

Because of that, we will just set a lower value to close our markup before the pagination part.

Now we will reload the main shop page, and here’s the result:

Now that you learned how to use hooks for the main shop page, we will show you how to override the product item content. But before we start, we have to note that the most important things for using hooks are inspecting/debugging the theme’s/plugins files and finding the right place where markups are rendered so you can be able to inspect that code and check if it’s possible to override it with hooks. The WooCommerce plugin has a good folder organization, and you can find all the templates inside the WooCommerce plugin/templates folder.

The main product item file which we now want to override is content-product.php. Inside that file you will see all the hooks with hooked function that the plugin authors implemented for their purposes.

Also Read…

The Best WooCommerce CRM Solutions

How to Add Products in WooCommerce

How to Install WooCommerce Plugin

How to Add a Sold Badge on Product Item

To add a new feature for product item, in this case sold badge mark, we need to teach you what is a global $product object and how you can use it first. As you can see in the code below, for first time we used a global variable $product and the conditional if ( ! $product->is_in_stock() ) {.

A global variable $product is a default variable inside the plugin, and you can use it to access additional functionalities for code manipulation. The type of $product variable is object and that object is extended with many methods (functions). We used it to access to is_in_stock() method where this method returns boolean value if the product is in stock. Because of that, in the code below we have added a conditional where we check whether the product is in stock. If it’s not in stock, then we will render the sold badge markup. Otherwise, we will skip it.

Finally, the custom code you can use to add that sold badge on your items is:

if ( ! function_exists( 'add_sold_badge_mark ) ) {
/**
* Adding sold badge for product item
*/
function add_sold_badge_mark () {
global $product;
if ( ! $product->is_in_stock() ) {
echo '' . esc_html__( 'Sold' ) . '';
}
}
add_action( 'woocommerce_before_shop_loop_item_title', 'add_sold_badge_mark' );
}

How to Change Product Item Title Markup

As you can see inside the content-product.php file, the product item title is added on action hook woocommerce_shop_loop_item_title with 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 check this function, you will see that the authors of the plugin rendered the html tag directly, and there is no filter to override it. Because of that, we will show you two solutions to change that markup.

The first solution is to override the whole function inside your theme’s /function.php file. To do that, just copy/paste the whole function from the plugin folder inside your theme’s /functions.php. For example:

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

Then, just override the default title markup with yours, like this:

function woocommerce_template_loop_product_title() {
echo '<h4 class="my-product-item-title">' . get_the_title() . '</h4>';
}

The second solution is to remove the action hook from the plugin and to add your custom function to that hook. We prefer this solution in order to keep the code unique, flexible and to prevent potential problems on the plugin updates. The reason for that is because if the plugin author changes this function in the future, adds the additional code here or uses it in another place, then a problem or an error can occur on your side.

Here’s how the code for this solution should look like:

remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title' );
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' );
}

How to Change Positions of Price and Ratings

To change positions of elements inside a certain markup (in this case, a product item), you can use remove_action and add_action function with priorities. If elements are added with the hook, priorities define the place where the element will be inside the markup. The lower priority will render that element as the first.

WooCommerce plugin has a lot of hooks and in most cases, the elements are added together with the hooks. Therefore, this article is an ideal chance to show you how you can do that as well.

Here we will show you how to switch the position of price and ratings elements. The code for that will be:

// Remove functions from woocommerce_after_shop_loop_item_title hook with original priority
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
// Added functions to woocommerce_after_shop_loop_item_title hook with new priority
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 5 );

First, we will remove both elements from the product item part with original functions and priorities. You can find both elements inside the content-product.php file.

/**
* Hook: woocommerce_after_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_rating - 5
* @hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );

Then we will add the same functions on the same hook with new priorities, and the result will look like this:

Theme With All Essential Shop Functionalities

Although you can easily manage WooCommerce hooks to offer more options, sometimes it is easier to get a ready-made shop toolset that requires zero additional adjustments. We recommend you to check out Onea – a WooCommerce theme fully-stocked with easy-to-use shop layouts and options. Thanks to carefully crafted functionalities of this theme, you won’t need to change any code. On the contrary, Onea requires no coding skills. What we like the best about this theme is its collection of shop templates that includes both product lists and single layouts. Apart from this, it integrates many other practical functionalities such as user wishlist, product description, filter by price, quick view – and many more. This theme is fully customizable so you can adapt any element to your preferences. Also, it’s SEO and retina ready, which will make sure your shop content looks great on any device.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

• Using an HTML5 Button Element as Contact Form 7 Submit
• Child Theme – A Simple Explanation
• Customize Option in WordPress