WooCommerce has more than 5 million downloads, which makes it the most popular commercial plugin for WordPress. It is open-source, free, and secure. And, which is more important, it is easily customizable. The most popular customizing tools there are called hooks. Here we are giving reasons why you should apply this supply to your site and how to operate with it. In the end, we provide you with a short and useful WordPress Woocommerce hooks list.
WordPress Hooks: Introduction
With that helpful digital tool for eCommerce projects, developing your site’s appearance and updating the feature set get much easier than before. WooCommerce saves your time and makes a big part of it automatic. That is how website improving manually looks:
- You have to touch core files, which is connected with more difficulties and time spent.
- Completing the same job manually, you spend a lot of time and do extra work.
- Changing the template leads to losing all the options you’ve added. With the new design, the same task must be completed again.
With hooks, the customization process takes only a few moments. Nothing will happen if you decide to replace the theme. All WooCommerce hooks are active with any e-commerce templates. Now, let’s dive deeper into the topic and start applying this solution to our websites.
Plugin with hooks is like a virtual sickle ‘hanging’ the part of your code. While the snippet is ‘hooked’, you can freely change it and add new functions to improve your e-shop. At this time, all the main plugin files stay untouched.
WooCommerce Hooks Illustrated
The easiest example is a ‘wp_head’ function that looks like that:
<?php wp_head() ?>By installing the ‘do_action( ‘wp_head‘ )’ function, you can customize your website’s header, add some extra options or fields. Open your site, tap the ‘View coding’ button, then go to the ‘functions.php’ file, try to delete ‘wp_head’, and then update the homepage. Now you admit that a header design disappeared or returned to a default style for your template. There are two main types:
- Filters — changing the value of the variable before it is returned. For example, you may modify the existing parts of your website, such as the ‘Sign In’ / ‘Add to the Cart’ button text, or remove a dysfunctional field.
- Actions — inserting any option you wish in the place where the hook is located. By applying them, you add new options to some pages, such as placing new fields: trust logos and others.
We will describe these two types further. Hooks are widespread not only in eCommerce but in the whole WordPress system. There is a lengthy list on the official documentation website, but every plugin usually sets up customized additions.
Applying that tool, you can even delete the whole list of default actions and replace them with your own. Or try changing all the default Filters’ meanings and enter yours. As a result, you receive an e-shop that fully meets your purposes.
WooCommerce Hooks: Application Example
The hook itself has no information inside and does nothing. It is just a naming set into the code, waiting to be recalled. Any WooCommerce hook works just like any WordPress one. The difference is that a WP function would be active with any plugin, and the WC provides solutions only for online-shops.
There are Woocommerce visual hooks and non-visual that are unseen for users. The first type deals with design and UX, and the second improves workability and speed. It might sound abstract and confusing now, so let’s move on to concrete examples.
Adding Cart Logos
It is an example of an easily-seen Woocommerce cart hook. When you apply an Action called ‘woocommerce_review_order_after_submit’, the list of Trust Badges appears in the cart section.
In the same way, you may widen your options range as needed until your site fits the clients’ requirements. You can improve the homepage, the shop, the items’ cards, or add a Woocommerce hook checkout. Let’s see how to install that step by step.
WordPress Hooks Tutorial
The process is quite simple, so may our guide help you deal with it. This scheme is active with any WordPress-based plugin, but we are showing the WooCommerce hook example. Before starting, choose the place of the setting. It can be your child theme file called ‘functions.php’ or a code snippet management plugin.
The second variant is more preferable. The most popular program is a Code Snippet Plugin. We recommend it for being well-structured and the ability to transport the result to any WP theme. Also, you can turn on & off some parts at any time without writing something new at all. Just activate or delete Snippets.
At this step, we are learning to get pages hooked with a Snippet plugin.
- Add a new snippet and give a clear name to it.
- Write a function according to the documentation.
- Go to a code editor and write or copy/paste the writing you need for hooking.
- Choose between ‘Run everywhere’, ‘Only in administration area’, ‘Only on-site front-end’, and ‘Run once’. The first definition must suit most cases.
- To simplify the structure, don’t add anything else to the same snippet. It won’t affect the efficiency, but separating them is going to make things easier to be found later.
After this process is finished, trust badges from a previous case will appear on the chosen page.
Action Installation
There is a scheme shown in official documentation that looks like that:
add_action( 'action_name', 'your_function_name' );
function your_function_name() {
// Your code
}To recall it, apply the hook ‘do_action(‘action_name’)’.When the code is written, you just install it in the Snippet Plugin as it was described before. The hook is recalled by ‘do_action(‘action_name’)’.
Filter Installation
Just like for the previous case, there is an official scheme in the documentation:
add_filter( 'filter_name', 'your_function_name' );
function your_function_name( $variable ) {
// Your code
return $variable;
}As you see, the difference is that a filter must return a variable. To recall it, write an ‘apply_filter( ‘filter_name’, $variable );’ function.
Popular WooCommerce Hooks List + Samples
As with any WP Plugin, there are default WooCommerce hooks. Visit the official documentation site WC to see a large list of Woocommerce hook references. Every single is matched with A of F to divide Actions from Filters.
They are provided with descriptions and samples of use, so you just copy and paste the needed one in your file. Visit the official docs to see the full Woocommerce hooks list. Just wander around and pick random strokes to see how they operate.
The table is huge, and it is useless to describe it all just in one article. Instead, we’ve created the short-list for different sections. You may see those on any e-shop you use.
Removing the Breadcrumbs
Breadcrumb trail is the component showing the way from the first element to the one a user sees at the moment. In a default WP theme Twenty Seventeen, it looks this way:
It is shown by the function ’woocommerce_breadcrumb’. To remove it, use a ‘woocommerce_before_main_content’. Then, with ‘remove_action’, you get rid of the breadcrumbs.
As the result, that element will disappear:
Hiding the Title
The previous pattern included an Action. Now, let’s look at how to work with a Filter.
You remove the title by changing the value of the ‘hide_woocommerce_page_title’ variable from True to False. After that, you receive a page header without a name on top. To be precise, it just becomes invisible.
Transforming the Way Items are Shown
By applying a Filter ‘change_woocommerce_products_per_page’, you can customize the number of items showing on one list. You just choose the number and set it as a value of a variable. Here we enter the number 8.
And here is the result:
Switching Positions
To set some points in one markup another way, you should work with priorities in the Woocommerce price hook. When the priority rises, the part goes up. In a default settings combination, the price goes below the rating stroke.
To change it, you must remove the original setting and switch the priorities with the ‘remove_action’ and ‘add_action’ functions. If the rating had ‘5’ and the price had ‘10’, you just replace meanings and get the item card looking that way:
Checkout Woocommerce Hooks
We think that the best explanation is demonstrable. So, here is the Woocommerce visual hook guide for the checkout page. All functions are applied to a checkout’s layout. To activate each of them, use the method we described in the previous paragraph.
The previous part included the heading functions, and the next is about the booking form and shipping details. Think of designing this well, because the right appearance gives a trustworthy look.
If you are not sure how to install them right, go to the docs and search the name. Here is the example and the written sample to copy/paste.
Cart Page Hooks
Here is a Woocommerce visual hook guide for the cart. This part is highly-customizable, and the number of possible solutions is large. You might not need all of them, so pick only the necessary features. That gives your site a nicer and lighter appearance.
Woocommerce Plugin Other Options
The number of options is larger, but we included only the main ones. They are usually applied to every shop to make the page look well-structured. Easy-to-understand appearance has an essential meaning for gaining popularity.
Of course, there are not only hooks that make the WC plugin so complement and powerful. For example, there is a wide Extension Archive for shops with different needs. There are simple guides for each category, including installation, configuration, and other tips, and FAQ.
It gives you incredible abilities to create a comfortable and suitable e-shop of any purpose. In XTemos, we create ready Premium WP templates. There you may customize them as you wish, add features, or exclude elements. We design themes for eCommerce, blogs, corporate needs, or multipurpose. Every design is built to work correctly especially with WooCommerce, the most advanced selling plugin. You can apply personal solutions there or just download the template you like and use the provided options. Just choose some suitable options from the wide range and start selling.