Get a fast, conversion-focused WooCommerce theme in 2020. Switch to Shoptimizer.

Home Blog – eCommerce News, tips and tutorials WooCommerce Hooks: Introduction, Tutorial, and Real-Life Examples

WooCommerce Hooks: Introduction, Tutorial, and Real-Life Examples

WooCommerce Hooks

If you want to customize how your WooCommerce store looks and/or functions, understanding WooCommerce hooks is going to make your life a whole lot easier. We’ve included two videos at the end which allow you to follow along step-by-step.

Hooks make it easy to insert content or change behavior at specific parts on your store, like the checkout page, shopping cart page, etc. What’s so great about WooCommerce hooks is that they let you do this without needing to edit any of the underlying theme template files.

In this post, we’re going to cover everything hook-related. You’ll learn:

  • What hooks are in a general WordPress sense
  • How understanding hooks can make your life a whole lot easier
  • The WooCommerce hooks that you can use to modify your store
  • How to actually use hooks to insert or modify content
  • Three real-world examples of WooCommerce hooks in action to spark some inspiration
  • Two videos where you can follow along exactly how to do it

By the end of this post, you’ll know more about hooks than this guy:

Captain hook

What are WordPress Hooks in General?

Before we get into the topic of WooCommerce hooks, let’s talk about hooks in a general WordPress sense.

A WordPress hook lets you “hook in” to a specific part of your WordPress site to add new functionality/data or modify your site’s existing behavior.

For example, the wp_head hook is a core WordPress hook that lets you insert scripts or data into the <head></head> section of your site.

Let’s say that you want to add the Google Analytics tracking script to your site.

Rather than using a Google Analytics plugin or manually editing the header template of your child theme, you could just use the aforementioned wp_head hook to easily insert the Google Analytics tracking script at the right location.

Hooks can be both actions and filters:

  • Action – these let you do “something” new. For example, inserting your Google Analytics tracking script into the header of your site like I mentioned above.
  • Filters – these let you modify the behavior of something that already exists (a variable). For example, you can use a filter to change the text of the add to cart button across your entire store.

WordPress comes with its own set of hooks in the core software. But WordPress themes and plugins, like WooCommerce, can also add their own hooks.


How WordPress Hooks Make Your Life a Lot Easier

As an end-user, the big benefit of WordPress hooks is that they make it a lot easier for you to modify how your site works or insert new content.

Without hooks, you would need to manually edit your child theme’s template files every time you wanted to make a modification to your site’s code.

Not only is this a lot more complicated, but it also means that you’re effectively locked in to that theme. If you ever change themes, you would lose all of the modifications that you made.

Thanks to WordPress hooks, it’s the opposite:

  • It’s super easy to insert or modify code because you do not need to work with the underlying theme template file.
  • Your changes are portable because all of your hooks will keep working even if you change themes. Excluding any hooks that come directly from your theme – more on these later.

What are WooCommerce Hooks?

WooCommerce hooks are just like regular WordPress hooks, but specifically located to help you customize your WooCommerce store.

For example, you can use hooks to add text or icons to your shopping cart or checkout pages, modify your single product pages, and lots more.

Let’s go through the WooCommerce hooks that you’ll likely have access to…

The WooCommerce Plugin Comes With Its Own Hooks

By default, WooCommerce comes with a lengthy list of hooks. Beyond adding tons of filters to help you modify default WooCommerce functionality, you also get lots of action hooks that let you modify core WooCommerce pages like the:

  • Single product page
  • Shop archive pages
  • Shopping cart page
  • Checkout page

If you want to view a full list of all the available filter and action hooks, you can check out the WooCommerce docs here. This list is a bit overwhelming because, as I said, WooCommerce comes with a ton of hooks.

If you’re specifically interested in action hooks to add new content to various parts of your store, I would instead recommend checking out the awesome Visual Hook Series from Rodolfo at Business Bloomer.

Basically, it gives you visual previews so you can understand exactly where each action hook will output its content on the page. Here’s a small sample from Rodolfo’s series:

WooCommerce hooks visual guide

So if you wanted to add new content above the product title on the single product page, you know that you need the woocommerce_single_product_summary hook.

Here are some of Rodolfo’s most relevant guides:

Your WooCommerce Theme Adds New Hook Locations

Beyond the hooks that are included in the core WooCommerce plugin, your chosen WooCommerce theme likely adds its own hooks to give you even more flexibility.

For example, our Shoptimizer WooCommerce theme includes a number of hooks to help you modify its:

  • Header
  • Footer
  • Sidebar
  • Pages
  • Posts

For example, Shoptimizer lets you easily inject content above your navigation menu or before the content.

Rodolfo at Business Bloomer also put together a visual guide to the Shoptimizer hooks:

Shoptimizer WooCommerce hooks visual guide

How to Use WooCommerce Hooks

To use WooCommerce hooks (or WordPress hooks in general), you’ll need to add code to your site. But again, you do not need to edit the template files themselves – you can add this code all in the same spot.

There are two places you can add this code:

  1. Your child theme’s functions.php file.
  2. A code snippet management plugin – I like Code Snippets.

While it’s fine to use your child theme’s functions.php file, I’m going to recommend (and use) the Code Snippets plugin for a few reasons:

  • It’s much easier to manage multiple hook snippets because you can give each snippet its own separate entry.
  • You can easily enable/disable specific hooks as needed.
  • It’s more portable because all of your code snippets will automatically come along even if you change WordPress themes.

To add a new hook with Code Snippets, you…

  • Go to Snippets → Add New
  • Give your hook a name to help you remember it
  • Add the code for your hook in the code editor
  • Choose where to run the snippet (when in doubt, you can just Run snippet everywhere)
  • Click Save Changes and Activate to make it live
Adding WooCommerce hooks in Code Snippets

If you want, you can add multiple hooks in the same Code Snippets entry, but I find it more convenient to create separate entries for each hook.

Now, let’s reinforce this knowledge with some real-world examples…


Three Real-World Examples of WooCommerce Hooks

Now that you know what WooCommerce hooks are and how to use them, let’s finish things out with some real-world examples of WooCommerce hooks in action to pull everything together and give you some inspiration.

1. Add Trust Logos to the Checkout Page

Displaying trust logos right as a person is going through their purchase is a great way to boost your conversion rates.

While the Shoptimizer theme automatically adds trust badges and testimonials below the Place order button, not all WooCommerce themes offer this out of the box.

If your theme doesn’t come with these conversion-boosting elements, you can use the woocommerce_review_order_after_submit hook to add your own.

For example:

Adding WooCommerce hooks in Code Snippets

The first row of trust badges comes from the WooCommerce hook, while the second row is already present in the Shoptimizer theme:

Example of WooCommerce hooks on the checkout page

2. Show Credit Card Logos on Cart Page

Questions about available payment methods are a big cause of shopping cart abandonment. To make it easy for shoppers to quickly know which payment methods you support, you can add credit card/PayPal badges on the shopping cart page that indicate which payment methods you support.

To add this immediately below the Proceed to checkout button, you can use the woocommerce_after_cart_totals hook and either images or font icons.

For example:

Payment method hook

And you can see the credit card logos underneath the Proceed to Checkout button:

Payment method logos

3. Change the WooCommerce Breadcrumb Text

The previous two examples of WooCommerce hooks used action hooks to add new content, but remember that there’s another type of hook – filters.

So here’s an example of using a filter hook to change the text on your store. In this case, it’s the text of the breadcrumbs that appear on the single product page.

Let’s say you want to change the default “Home” to “All Products”:

WooCommerce breadcrumb

To change that text, you could use the following filter:

Change WooCommerce breadcrumb hook

And voila – you’ve changed the breadcrumb text:

Changed breadcrumb

Bonus video #1: How to remove content from the Single Product Page

Business Bloomer have a number of videos available as part of the CustomizeWoo course which walk you through the process of hooks so you can easily follow along. Rodolfo has kindly given us two exclusive free videos, just for CommerceGurus readers.

The first shows you how to remove content from the single product page.


Bonus video #2: How to edit Checkout Fields

The second exclusive video shows you how to edit the fields displayed on your checkout without needing any additional plugins.


Get Started With WooCommerce Hooks Today

If you want to be able to easily modify your WooCommerce store without directly editing your theme’s template files, learning how to use WooCommerce hooks is a great way to make your life easier.

For the easiest way to get started, I recommend checking out the aforementioned Visual Hooks guide at Business Bloomer, as it makes it a lot easier to understand how the abstract hooks actually appear on the front-end WooCommerce content pages.

Then, you can use Code Snippets or your child theme’s functions.php file to start adding your own WooCommerce hooks.

Do you have any additional questions about how WooCommerce hooks work? Leave a comment and let us know.

Colin Newcomer is a freelance writer from the US, working the digital nomad lifestyle in Saigon, Vietnam. He helps businesses and websites grow by writing in-depth, conversational blog posts.

Shoptimizer WooCommerce Theme

Shoptimizer is a FAST WooCommerce theme that comes with a ton of features all designed to help you convert more users to customers.

More details  →

Shoptimizer WooCommerce Theme screenshot

Latest eCommerce Guides View all Guides

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Updates

$50
Off

Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!
{"cart_token":"","hash":"","cart_data":""}