What Are WooCommerce Hooks?

Do you want to be able to customize the look and function of your WooCommerce store?

That’s where it’s very useful to know about WooCommerce hooks. They make it easier to insert functions or content into specific parts of your website to help you achieve the customization you need.

Here, we’re providing a quick guide to WooCommerce hooks and why you should familiarize yourself with them:

What are WooCommerce hooks?

WooCommerce hooks are like other WordPress hooks in that they allow you to execute custom scripts on a page. WooCommerce comes with many hooks in-built which give you extended possibilities for customization.

For example, you could use WooCommerce hooks to add icons or text to product or checkout pages. Hooks enable you to create independent plugins or extensions without modifying the main WordPress code. This helps to ensure that your website stability is upheld.

How do WooCommerce hooks work?

Like WordPress hooks, WooCommerce hooks are fashioned as either actions or filters. Actions allow you to do something new, while filters allow you to modify the behavior of a function that is already there. For example, you can use filters to change the text of a button.

The syntax used for action and filter hooks is shown below:

Action hook

add_action(‘name_of_the_action_hook’,’your_action_hook_funcion’)

Filter hook

add_filter(‘name_of_the_filter_hook’,’your_filter_hook_funcion’)

After adding the hook you would insert your scripts in the function.

Why use hooks?

Why are hooks important? The bottom line is that they make life a lot easier when it comes to modifying WooCommerce websites. Using hooks means that you don’t have to modify the main code of WooCommerce, WordPress or other plugins, which can be a nightmare for stability and compatibility with any updates.

Additionally, your hooks will be portable, meaning that if you decide to change WordPress themes somewhere along the line, your hooks will remain intact (with the exception of any hooks that come directly from your theme).

Hooks provide you with a lot of versatility, especially because WooCommerce has a massive list of them. As a standard part of WooCommerce, you can add hooks to product pages, shopping cart pages, checkout pages and more. Additionally, your chosen WooCommerce theme probably adds its own hooks for things like headers, footers, sidebars and pages.

WooCommerce hooks help you to modify pages without messing up the main code Click To Tweet

Where do you find WooCommerce hooks?

WooCommerce hooks are found in various locations according to this list from WooCommerce. You need to view the source to check which are supported. For example, if you want to add hooks to a shop page, you need to look in the plugin folder: woocommerce/templates/archive-product.php. You’d then check which hooks the author has implemented there.

How can you use WooCommerce hooks?

In order to use hooks, you need to add some code to your site (but not into the template files). There are two places to add this code, either the functions.php file of your child theme or by using a code snippet management plugin – Code Snippets is one of the most popular for this purpose.

You’ll probably figure out your own preference between the two, but there are some good reasons to use the plugin first. First, it helps your code snippets to be more portable across WordPress themes because they automatically come along with the plugin. Second, it makes it easier to manage multiple hook snippets and third, it makes it really easy to enable or disable snippets at any time because they are easy to find. You’re able to give each hook its own name using something that you will recognize and understand.

In WooCommerce, here are some of the most common hooks:

Products

• woocommerce_before_main_content
• woocommerce_after_main_content
• woocommerce_before_single_product_summary
• woocommerce_after_single_product_summary
• woocommerce_before_single_product
• woocommerce_after_single_product
• woocommerce_single_product_summary
• woocommerce_product_meta_start
• woocommerce_product_meta_end
• woocommerce_review_before
• woocommerce_review_before_comment_meta
• woocommerce_review_before_comment_text
• woocommerce_review_comment_text
• Woocommerce_review_after_comment_text

Checkout

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_before_checkout_billing_form
• woocommerce_checkout_shipping
• woocommerce_checkout_after_order_review
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_review_order_before_cart_contents
• woocommerce_review_order_after_cart_contents
• woocommerce_review_order_before_shipping
• woocommerce_review_order_after_shipping
• woocommerce_review_order_after_order_total
• woocommerce_checkout_order_review
• woocommerce_review_order_after_submit
• woocommerce_review_order_after_payment
• woocommerce_after_checkout_form
• Woocommerce_thankyou

Cart

• woocommerce_before_cart
• woocommerce_before_cart_table
• woocommerce_before_cart_contents
• woocommerce_cart_contents
• woocommerce_after_cart_contents
• woocommerce_cart_is_empty
• woocommerce_cart_totals_before_shipping
• woocommerce_cart_totals_after_shipping
• woocommerce_cart_totals_before_order_total
• woocommerce_cart_totals_after_order_total
• woocommerce_after_shipping_rate
• woocommerce_before_shipping_calculator
• woocommerce_proceed_to_checkout
• woocommerce_after_cart_totals
• woocommerce_after_cart

Global

• pre_get_product_search_form
• woocommerce_breadcrumb
• Woocommerce_no_products_found

Account

• woocommerce_before_account_navigation
• woocommerce_after_account_navigation
• woocommerce_before_edit_account_address_form
• woocommerce_account_content
• woocommerce_before_my_account
• Woocommerce_after_my_account

Mini Cart

• woocommerce_before_mini_cart
• woocommerce_before_mini_cart_contents
• woocommerce_mini_cart_contents
• woocommerce_widget_shopping_cart_before_buttons
• woocommerce_widget_shopping_cart_buttons
• Woocommerce_after_mini_cart

Email

• woocommerce_email_after_order_table
• woocommerce_email_before_order_table
• woocommerce_email_customer_details
• woocommerce_email_footer
• woocommerce_email_header
• woocommerce_email_order_details

Some useful hook examples

Here are a few useful examples that you might try on your own ecommerce site:

Add a description to your shop page

The WooCommerce default is set so that the shop page doesn’t have a description enabled. A description would sit under the main heading for the page and can be a great way to add your own unique brand voice, as well as some SEO value.

The shop description can be enabled using the woocommerce_archive_description hook. It looks like this:

function quadlayers_shop_description() {
$description = ‘<p>Welcome to our store! Please browse our selection of organic coffee beans and merchandise for coffee drinkers.</p>’;
echo $description;
}

add_action(‘woocommerce_archive_description’, ‘quadlayers_shop_description’);

Add an information note after the add to cart button

Sometimes it can be very useful to have information showing below the add to cart button for a product. For example, you might remind people that they get free shipping if they spend a certain amount or that they can return within a certain period of time. You will need to use this hook: woocommerce_after_add_to_cart_form

It will look something like this (with your own category slugs and valid URL):

add_action( ‘woocommerce_after_add_to_cart_form’, ‘quadlayers_after_addtocart_button’ );
function quadlayers_after_addtocart_button() {
if ( is_product() && has_term( array( ‘coffee beans’ ), ‘product_cat’ ) ) {
echo ‘<div style=”clear: both”></div><div style=”margin-top: 10px”>;<a href=”/shipping-costs/” target=”_blank” rel=”noopener”><i class=”fa fa-truck” aria-hidden=”true”></i> Subscribe to get free shipping on all orders;</a></div>
‘; } }

Final thoughts

WooCommerce hooks are your best bet for easily modifying your WooCommerce store features without having to edit your theme template files.

They work just the same as WordPress hooks and give you the benefit of added features or functions that will be portable and won’t endanger your site stability.

To get started, there are multiple tutorials available online. Check out Kinsta or Business Bloomer for just a couple of examples.