Here’s a visual hook guide for Storefront Theme by WooCommerce.

This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations. Also, you can copy & paste in seconds and speed up your customization time.

Let me know in the comments what you think about this resource! Enjoy!

1. Storefront Theme > Header Hooks

storefront_before_header

storefront_header

add_action( 'storefront_header', 'storefront_header_container', 0 );
add_action( 'storefront_header', 'storefront_skip_links', 5 );
add_action( 'storefront_header', 'storefront_site_branding', 20 );
add_action( 'storefront_header', 'storefront_secondary_navigation', 30 );
add_action( 'storefront_header', 'storefront_product_search', 40 );
add_action( 'storefront_header', 'storefront_header_container_close', 41 );
add_action( 'storefront_header', 'storefront_primary_navigation_wrapper', 42 );
add_action( 'storefront_header', 'storefront_primary_navigation', 50 );
add_action( 'storefront_header', 'storefront_header_cart', 60 );
add_action( 'storefront_header', 'storefront_primary_navigation_wrapper_close', 68 );

storefront_before_footer

storefront_footer

add_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
add_action( 'storefront_footer', 'storefront_credit', 20 );

storefront_after_footer

add_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
add_action( 'storefront_before_content', 'storefront_header_widget_region', 10 );
add_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
add_action( 'storefront_page', 'storefront_page_header', 10 );
add_action( 'storefront_page', 'storefront_page_content', 20 );
add_action( 'storefront_page_after', 'storefront_display_comments', 10 );

5. Storefront Theme > “Homepage Page Template” Hooks

storefront_before_content

add_action( 'storefront_before_content', 'storefront_header_widget_region', 10 );
add_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );

homepage

add_action( 'homepage', 'storefront_homepage_content', 10 );
add_action( 'homepage', 'storefront_product_categories', 20 );
add_action( 'homepage', 'storefront_recent_products', 30 );
add_action( 'homepage', 'storefront_featured_products', 40 );
add_action( 'homepage', 'storefront_popular_products', 50 );
add_action( 'homepage', 'storefront_on_sale_products', 60 );
add_action( 'homepage', 'storefront_best_selling_products', 70 );

Home

Content of the WordPress page goes here.

storefront_homepage_before_product_categories

Product Categories

storefront_homepage_after_product_categories_title

storefront_homepage_after_product_categories

storefront_homepage_before_recent_products

Recent Products

storefront_homepage_after_recent_products_title

storefront_homepage_after_recent_products

storefront_homepage_before_featured_products

Featured Products

storefront_homepage_after_featured_products_title

storefront_homepage_after_featured_products

storefront_homepage_before_popular_products

Top Rated Products

storefront_homepage_after_popular_products_title

storefront_homepage_after_popular_products

storefront_homepage_before_on_sale_products

On Sale

storefront_homepage_after_on_sale_products_title

storefront_homepage_after_on_sale_products

storefront_homepage_before_best_selling_products

Best Sellers

storefront_homepage_after_best_selling_products_title

storefront_homepage_after_best_selling_products_products

6. Storefront Theme > Post Hooks

add_action( 'storefront_loop_post', 'storefront_post_header', 10 );
add_action( 'storefront_loop_post', 'storefront_post_meta', 20 );
add_action( 'storefront_loop_post', 'storefront_post_content', 30 );
add_action( 'storefront_loop_after', 'storefront_paging_nav', 10 );
add_action( 'storefront_single_post', 'storefront_post_header', 10 );
add_action( 'storefront_single_post', 'storefront_post_meta', 20 );
add_action( 'storefront_single_post', 'storefront_post_content', 30 );
add_action( 'storefront_single_post_bottom', 'storefront_post_nav', 10 );
add_action( 'storefront_single_post_bottom', 'storefront_display_comments', 20 );
add_action( 'storefront_post_content_before', 'storefront_post_thumbnail', 10 );
Share:

Leave a Reply