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 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 .
Showing all 4 results
Sort by popularity
Sort by average rating
Sort by newness
Sort by price: low to high
Sort by price: high to low
Product Title 1
Product Title 2
Product Title 3
Product Title 4
The WooCommerce Shop page contains the following hooks:
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 –
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.
Increase WooCommerce Store Sales
"This fully customizable plugin has saved us $6,997.81 over the last 5 months in abandoned orders. If you’re on the fence, don’t think twice. Abandoned Cart Pro pays for itself really quickly." - Miroslav Mazalica
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’.
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.
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.
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.
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.
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.
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 –
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.
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.
For me Woocommerce can be very difficult, but also deliver satisfying structure and overview.
I will definitaly look into some of these hooks you mention
Thanks for the feedback. I am glad you liked the post. WooCommerce has made it easy for us to extend it by adding these hooks on all of its pages.
Wow! I just have to say thank you. You saved me a lot of time – this was excactly what i was looking for. I’m going to share you post, as i know a few more that would benefit from these hooks.
And FYI, as someone that is mediocre in coding, this was easy understandable.
When I was a beginner, I used to search for blogs that had lots of examples and were easy to understand. It feels great when someone new to programming learns something from your blog.
Thank you for the feedback 🙂
Thank you for this article it’s really helping a lot.
One question though. What is the difference between using the “woocommerce_archive_description” hook and simply using the editing panel of the shop page? Is there any advantage ?
Writing the description of the page in that panel does the same..
I have added the description using the hook just for showing an example. Its not necessary that you add only the description using this hook. You can add some code to do various things on the page. For example, you can display some offer going on your site.to the visitors. There are many uses.
Hope this helps. Please let me know if you have any questions.
Thanks for replying.
That’s what I first thought but as a hook was available for that I then thought there probably was another reason.
Thanks very much
All the best
Me again. One more question if you don’t mind me asking.
I have two orderby dropdown forms on my shop page. One before the product list and one after.
Tried a remove_action ( ‘woocommerce_after_shop_loop’, ‘woocommerce_catalog_ordering’, 30 ); in my functions.php file but nothing happens. I just want to get rid off the one underneath the product list.
I have issues with the new wordpress version, regarding this?
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?