WooCommerce Shop Page Hooks: Visual Guide with Code Snippets

WooCommerce shop page hooks allow developers to add, remove, or modify content at specific locations on the Shop page—without editing core WooCommerce files. Using these hooks, you can insert banners, labels, custom messages, product details, or promotional content exactly where you want them to appear. In earlier guides, we explored different WooCommerce cart page hooks & checkout page hooks.

In this post, we will learn about different WooCommerce Shop page hooks and where they are placed on the page. The examples below are tested with WooCommerce version 3.3 .

List of WooCommerce Shop page Hooks:

1. woocommerce_before_main_content

The woocommerce_before_main_content hook is placed at the start of the shop page. This hook is defined in the single-product.php template in woocommerce.

Let’s see an example to show a banner at the top to inform customers that there is a 10% discount on all the items in the shop.

It will look like this –

2. woocommerce_archive_description

The woocommerce_archive_description hook is placed after the ‘Shop’ header title on the shop page. This hook is defined in the archive-product.php template file in WooCommerce.

This hook defines itself. We can add some description about the shop page using it. Let’s take an example of a shop which sells TV sets. We will add some description like – ‘Shop from a wide selection of LED TVs..’ below the shop title.

3. woocommerce_before_shop_loop

The woocommerce_before_shop_loop hook is placed before the products list on the shop page. This hook is defined in the archive-product.php template file in WooCommerce.

For example, we will add a title before the products list called ‘New & Trending’.

Related Article: How to Show Product Description on the Shop Page in WooCommerce?

4. woocommerce_before_shop_loop_item

The woocommerce_before_shop_loop_item hook is placed on top of each product in the list. This hook is defined in the content-product.php template file in WooCommerce.

Whatever we define here will apply to all products in the list on the shop page. For example, lets add a tag of ‘New & Trending’ to all products.

If you want to add it to a single product, you can do so by adding a condition to check for the product ID.

5. woocommerce_before_shop_loop_item_title

The woocommerce_before_shop_loop_item_title hook is placed above the product image. This hook is defined in the content-product.php template file in WooCommerce.

Let’s add a tag of ‘Best Seller’ to some specific products with ID 57 & 59.

6. woocommerce_shop_loop_item_title

The woocommerce_shop_loop_item_title hook is placed above the product name. This hook is defined in the content-product.php template file in WooCommerce.

There can be many uses of this hook. Lets add the stock available for each product.

7. woocommerce_after_shop_loop_item_title

The woocommerce_after_shop_loop_item_title hook is placed below the product name. This hook is defined in the content-product.php template file in WooCommerce.

Lets display the product categories under the product name.

8. woocommerce_after_shop_loop_item

The woocommerce_after_shop_loop_item hook is placed above the ‘Add to Cart’ name. This hook is defined in the content-product.php template file in WooCommerce.

We will show our customers a few recommended products.

9. woocommerce_after_shop_loop

The woocommerce_after_shop_loop is placed just below the product list. This hook is defined in the archive-product.php template file in WooCommerce.

Let’s add a featured product at the bottom using this hook –

10. woocommerce_after_main_content

The woocommerce_after_main_content is placed after all the page content. This hook is defined in the single-product.php template file in WooCommerce.

You can add support related description and link to your support page here.

Conclusion

WooCommerce shop page hooks give you full control over how content is displayed on your shop page—from banners and product labels to custom messages and recommendations. By using the right hook at the right position, you can customize the shop layout without editing core WooCommerce files. If you’re looking to extend this customization beyond the shop page, the next step is to explore how WooCommerce handles hooks on the cart page with practical examples.