[Woocommerce] How to use Action Hook and Filter Hook

When we need to customize something in Woocommerce, in addition to editing the templates that we talked about in the previous section, we also have another option that is to take advantage of the action hooks and filter hooks that Woocommerce already has. so we can do anything.

Must see if you don’t know:

Using WooCommerce Action Hooks

If you have gone through the two suggestions above, you can understand that the action hook will be generated by the function do_action() in templates. And we try to open the file archive-product.php in the template folder will see some paragraphs like this.

[code]
/**
* woocommerce_archive_description hook
*
* @hooked woocommerce_taxonomy_archive_description – 10
* @hooked woocommerce_product_archive_description – 10
*/
do_action( ‘woocommerce_archive_description’ );
?>
[/code]

That means it has attached an action hook named woocommerce_archive_description right at that position, and usually these action hooks we will use to determine where to do an action right at the hook’s location. For example, if I want to insert a certain welcome sentence into that hook position, I will have the following code placed in functions.php in the theme:

/* ThachPham Testing Hook */
function tp_before_main_content() {
echo ‘<p>Đoạn chữ này sẽ xuất hiện phía trên danh sách sản phẩm.</p>’;
}
add_action(‘woocommerce_archive_description’, ‘tp_before_main_content’);

Very easy to understand and use.

In addition, we can remove some functions that are already hooked into the hook because you can see the comment is @hooked are not? That’s exactly what it tells us that the function is hooking right at this location.

Now, let’s take the example of deleting the sort option displayed in the store page.

remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30 );

The above paragraph means that I delete the function woocommerce_catalog_ordering() out of hookwoocommerce_before_shop_loop and it will execute with a priority of 30. Simply based on this information we know:

<?php
/**
* woocommerce_before_shop_loop hook
*
* @hooked woocommerce_result_count – 20
* @hooked woocommerce_catalog_ordering – 30
*/
do_action( ‘woocommerce_before_shop_loop’ );
?>

View all Woocommerce Action Hooks

Using Filter Hooks

In WordPress, the Filter Hook will be declared with the function apply_filters() and allows us to modify the content of the code in which the hook is set. For example you open the file /templates/single-product/sale-flash.php You will see the following paragraph:

<?php echo apply_filters( ‘woocommerce_sale_flash’, ‘<span class="onsale">’ . __( ‘Sale!’, ‘woocommerce’ ) . ‘</span>’, $post, $product ); ?>

In the above code, it created a filter hook namedwoocommerce_sale_flash and you can edit its HTML content that you already see, and it also contains two extra parameter variables that we can use.

And when we need to use it to filter, we will have the following code to edit the content we want. For example:

/* ThachPham Testing Filter Hook */
function tp_sale_flash( $output ) {
$output = ‘<span class="onsale thachpham">’ . __( ‘Giảm giá’, ‘woocommerce’ ) . ‘</span>’;
return $output;
}
add_filter( ‘woocommerce_sale_flash’, ‘tp_sale_flash’ );

You can customize the code to whatever style you want, as long as you remember when filteringreturn The content is carefully displayed.

View all Woocommerce filter hooks

Epilogue

How to use hooks in WordPress in general and Woocommerce in particular is only that much, but the important thing is how we will apply it flexibly. In fact, I see now that when we don’t need it, we may not know what to do with it, but when you need to customize Woocommerce, remember to think of hooks.