Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets

WooCommerce has lots of different hooks for their shop page, product pages, cart page & checkout page. These hooks help us to add our content in different places on these pages. We saw the different WooCommerce cart page hooks & checkout page hooks earlier.

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 .

.columns.small-12.large-8.medium-12{max-width:100%}.widget-area{display:none}#cart-wrapper{border:1px solid #aaa;padding:20px}.hook{border:1px dashed #46351d;padding:5px;display:flex;justify-content:center;margin-top:15px;margin-bottom:15px;background:#e8732e;color:#fff}thead{text-indent:initial;text-align:left;padding:71px}th,td{border:1px solid #eee;padding:15px}@media screen and (min-width:64em){.large-8{flex:100%}}.products{display:flex;align-items:flex-start;flex-wrap:wrap;justify-content:space-around;flex-direction:row;clear:both}.site-main ul.products li.product{width:45%;margin-bottom:25px;border:1px solid #aaa;padding:1%;text-align:center;list-style-type: none;}.woocommerce-result-count{float:left;margin-right:25px}

woocommerce_before_main_content

Shop

woocommerce_archive_description

woocommerce_before_shop_loop

Showing all 4 results

Default sorting
Sort by popularity
Sort by average rating
Sort by newness
Sort by price: low to high
Sort by price: high to low

  • woocommerce_before_shop_loop_itemwoocommerce_before_shop_loop_item_titleWooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche SoftwaresWooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares;woocommerce_shop_loop_item_title

    Product Title 1

    woocommerce_after_shop_loop_item_title

    €5,00

    woocommerce_after_shop_loop_item

    Add to cart

  • woocommerce_before_shop_loop_itemwoocommerce_before_shop_loop_item_titleWooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche SoftwaresWooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares;woocommerce_shop_loop_item_title

    Product Title 2

    woocommerce_after_shop_loop_item_title

    €5,00

    woocommerce_after_shop_loop_item

    Select options

  • woocommerce_before_shop_loop_itemwoocommerce_before_shop_loop_item_titleWooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche SoftwaresWooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwareswoocommerce_shop_loop_item_title

    Product Title 3

    woocommerce_after_shop_loop_item_title

    €1,00

    woocommerce_after_shop_loop_item

    Add to cart

  • woocommerce_before_shop_loop_itemwoocommerce_before_shop_loop_item_titleWooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche SoftwaresWooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwareswoocommerce_shop_loop_item_title

    Product Title 4

    woocommerce_after_shop_loop_item_title

    €1,00

    woocommerce_after_shop_loop_item

    Select options

woocommerce_after_shop_loop

woocommerce_after_main_content

The WooCommerce Shop page contains the following hooks:

  1. woocommerce_before_main_content
  2. woocommerce_archive_description
  3. woocommerce_before_shop_loop
  4. woocommerce_before_shop_loop_item
  5. woocommerce_before_shop_loop_item_title
  6. woocommerce_shop_loop_item_title
  7. woocommerce_after_shop_loop_item_title
  8. woocommerce_after_shop_loop_item
  9. woocommerce_after_shop_loop
  10. woocommerce_after_main_content

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 about that there is a 10% discount on all the items in the shop.

It will look like this –

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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.

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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’.

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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.

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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.

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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.

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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.

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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.

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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 –

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

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.

WooCommerce Shop Page Hooks: Visual Guide with Code Snippets - Tyche Softwares

Conclusion

These are just some simple examples to explain how we can use various hooks defined by WooCommerce. You can create lots of complex things to make your store more appealing to customers.

Browse more in: WooCommerce Tutorials, Code Snippets, WooCommerce Guide, WooCommerce How Tos

Share It:

Subscribe
Notify of
14 Comments
Newest
Oldest
Inline Feedbacks
View all comments
John Pozadzides
2 months ago

I said it on one of the other posts as well, but like everyone else here, this is amazing! And super helpful. Much appreciated once again!!

Thanks. – John P.

vincent
3 years ago

Hi,
Thanks for this, really helpful, and examples are really the best to understand… this is exactly what I needed… almost… 😀

I have created a custom taxonomy for my products and I desperately try to make them appears just below the other taxonomy (category/tag) on the shop page (the one with all the products… I used the “add_action( ‘woocommerce_shop_loop_item_title’, ‘shop_loop_item_title’, 1 );” but it shows above the title…

Is there any way to put this string exactly where I want…

Thanks!
Vincent

4 years ago

When I put some text in the Shop page header using the woocommerce_archive_description snippet, it shows up on every page in the store that displays a category with multiple products. How can I restrict the text so that it appears ONLY on the Shop page?

Giovanni
5 years ago

Hello, I try those hook, but not all working. In my site, woocommerce_after_shop_loop_item and woocommerce_shop_loop_item_title doesn’t working. Instead, woocommerce_after_main_content works perfectly. Moreover, how is it possible to use more functions at the same time?

5 years ago

Great read.

I have issues with the new wordpress version, regarding this?

14
0
Would love your thoughts, please comment.x
()
x