WooCommerce Archive Hooks [Complete Guide]

Table of Contents

In today’s brief post, we will share the WooCommerce product archive page hooks. The main aim of this guide is to help both beginners and advanced developers to customize the shop page.

It is important to learn how to customize this page without editing the core files. The product archive page contains a list of products related to a category.

WooCommerce comes with different hooks for its shop page, product page, cart page & checkout page. They help to add content in different places on these pages.

We have put together the WooCommerce archive hooks so that you can know their actual locations. It is worth mentioning that you can also copy-paste them and then place your custom functions.

WooCommerce Archive Hooks

Here is a list of all the hooks:

woocommerce_before_main_content – It is placed at the start of the shop page.
woocommerce_archive_description – It is placed after the ‘Shop’ header title on the shop page.
woocommerce_before_shop_loop – It is placed before the products list on the shop page.
woocommerce_before_shop_loop_item – It is placed on top of each product in the list.
woocommerce_before_shop_loop_item_title – It is placed above the product image.
woocommerce_shop_loop_item_title – It is placed above the product name.
woocommerce_after_shop_loop_item_title – It is placed below the product name.
woocommerce_after_shop_loop_item – It is placed above the ‘Add to Cart’ name.
woocommerce_after_shop_loop – It is placed just below the product list.
woocommerce_after_main_content – It is placed after all the page content.

WooCommerce add_action For Product Archive Page

It is important to learn how you can use these hooks to add trigger custom functions in different sections on the archive page in WooCommerce. You can unhook/remove each one of them:

add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );

add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );

add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

add_action( 'woocommerce_before_shop_loop', 'woocommerce_output_all_notices', 10 );

add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );

add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );

add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );

add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

Example To Add A Hook To Archive Page

In this section, we will illustrate how you can add a shop description above the ‘Shop’ title. It is important to paste the code in your child theme’s functions.php file. This ensures that your changes are not lost during an update.

Here are the steps you need to follow:

Log in to your WordPress dashboard as admin.
From the dashboard, navigate to Appearance > Theme Editor. When the Theme Editor page is opened, look for the theme functions file where we will add the function to add a shop description underneath the ‘Shop’ title.
Add the following code to the fuctions.php file:

add_action( 'woocommerce_before_main_content', 'shop_banner', 35);
function shop_banner(){
echo '&amp;lt;h1&amp;gt;Hello&amp;lt;/h1&amp;gt;';
}

This is the outcome:
Alternatively, if you want to add text below the ‘Shop’ page, add the following code in the functions.php file:

add_action( 'woocommerce_archive_description', 'shop_banner', 35);

function shop_banner(){
echo '&amp;lt;h1&amp;gt;Hello&amp;lt;/h1&amp;gt;';
}

This is the outcome:

Conclusion

In this post, we have shared all the WooCommerce archive hooks. You can use them to customize the shop page by adding text or a section without editing the core files.

It is important to paste your code into your child theme’s functions.php file.

This will ensure your changes are not lost during an update.

If you need further customization on the shop page, feel free to reach us for a custom quote. We hope that this post helped you to customize the shop page.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

WooCommerce Archive Hooks [Complete Guide]

WooCommerce Archive Hooks

WooCommerce add_action For Product Archive Page

Example To Add A Hook To Archive Page

Conclusion

Similar Articles

Related