Back to Blog

WooCommerce Visual Hook Display: WooCommerce Shop Page Hooks – Easy visual guide

See a visual guide of all the available WooCommerce shop page hooks. This applies to the WooCommerce shop page and the archive & category pages.


WooCommerce Shop Page Hooks

WooCommerce offers multiple hooks added to the WooCommerce shop page, you can use these hooks to add functionality to your WooCommerce pages.

Below is a visual interpretation or guide of all the WooCommerce shop page hooks available, so you can easy see where each hook will show up.

These WooCommerce shop page hooks are the same for the shop page, and the category and tag archive pages too.

Visual display of the WooCommerce Shop Page Hooks:

woocommerce_before_main_content

WooCommerce Shop Page

woocommerce_archive_description
woocommerce_before_shop_loop
Showing 1–2 of 10 results
woocommerce_before_shop_loop_item
woocommerce_before_shop_loop_item_title
WooCustomizer Image Placeholder
woocommerce_shop_loop_item_title

Product Title

woocommerce_after_shop_loop_item_title
$18.00
woocommerce_after_shop_loop_item
woocommerce_before_shop_loop_item
woocommerce_before_shop_loop_item_title
WooCustomizer Image Placeholder
woocommerce_shop_loop_item_title

Product Title

woocommerce_after_shop_loop_item_title
$18.00
woocommerce_after_shop_loop_item
woocommerce_after_shop_loop
woocommerce_after_main_content

Available WooCommerce Shop Page Hooks:

How to use a PHP hook on your website:

To use these page hooks you will need a little understanding of php code… You can add the following function to your website using by creating a child theme and then adding this code to the child themes functions.php file, or you can install our Site Customizations plugin and add the php code via the php file provided.

If you are not comfortable using code then please try out our StoreCustomizer plugin which offers a lot of useful functionality using all these hooks for you to customize your WooCommerce store… No coding knowledge needed.

/*
* My Custom Function
*/
function my_custom_function( array $params ) {
// Some Code Here
}
add_filter( 'woocommerce_before_main_content​', 'my_custom_function', 20 );

All these hooks are available in the WooCommerce product list pages, they are pretty self explanatory in their position but do refer to the visual hook guide if you’re not 100% sure on where exactly they hook into on the WooCommerce shop page.

Happy Coding!

Our free StoreCustomizer plugin offers different functionality to add sold out banners, product sales statistics, stock amounts and lots more to your WooCommerce shop page, all from a visual interface so you don’t need to touch any code… Have a look yourself and see what all StoreCustomizer offers.