Customize Storefront Theme without touching any code
Why not spend less time on designing WooCommerce stores?
Download FREE
Storefront theme provides various hooks so that other developers can easily extend or modify the theme. The concept of hooks is confusing for users who are starting out with WordPress development. There are 2 types of hooks that can be found on WordPress:
- Action Hook: allows you to add extra functionality at various points.
- Filter Hook: allows you to modify the data.
Here is a simple explainer: Actions do stuff, filters change stuff.
At last count (Version: 2.2.5), Storefront has around 48 Action Hooks & 61 Filter Hooks. Here is a complete list of Storefront WooCommerce theme hooks, hope this guide will save you many hours of trouble when developing a WooCommerce project using Storefront.
Contents
Header Hooks
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Action | storefront_before_site | Empty | Add content after body opening |
| Action | storefront_before_header | Empty | Add content before header tag |
| Action | storefront_header | storefront_skip_links | Displays content between header tags |
| storefront_social_icons | |||
| storefront_site_branding | |||
| storefront_secondary_navigation | |||
| storefront_product_search | |||
| storefront_primary_navigation_wrapper | |||
| storefront_primary_navigation | |||
| storefront_header_cart | |||
| storefront_primary_navigation_wrapper_close | |||
| Action | storefront_before_content | storefront_header_widget_region | Displays content after header tags |
| Action | storefront_content_top | woocommerce_breadcrumb | Adds content at the top of site content div |
Homepage Template
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Action | homepage | storefront_homepage_content | Add sections to Homepage Template |
| storefront_product_categories | |||
| storefront_recent_products | |||
| storefront_featured_products | |||
| storefront_popular_products | |||
| storefront_on_sale_products | |||
| storefront_best_selling_products | |||
| Action | storefront_homepage | storefront_homepage_header | Outputs page content in template-homepage.php |
| storefront_page_content | |||
| Action | storefront_homepage_before_product_categories | Empty | Add content before Homepage Product Category section title |
| Action | storefront_homepage_after_product_categories_title | Empty | Add content after Homepage Product Category section title |
| Action | storefront_homepage_after_product_categories | Empty | Add content after Homepage Featured Products section title |
| Action | storefront_homepage_before_recent_products | Empty | Add content before Homepage Recent Products section title |
| Action | storefront_homepage_after_recent_products_title | Empty | Add content after Homepage Recent Products section title |
| Action | storefront_homepage_after_recent_products | Empty | Add content after Homepage Recent Products |
| Action | storefront_homepage_before_featured_products | Empty | Add content before Homepage Featured Products section title |
| Action | storefront_homepage_after_featured_products_title | Empty | Add content after Homepage Featured Products section title |
| Action | storefront_homepage_after_featured_products | Empty | Add content after Homepage Featured Products |
| Action | storefront_homepage_before_popular_products | Empty | Add content before Homepage Popular Products section title |
| Action | storefront_homepage_after_popular_products_title | Empty | Add content after Homepage Popular Products section title |
| Action | storefront_homepage_after_popular_products | Empty | Add content after Homepage Popular Products |
| Action | storefront_homepage_before_on_sale_products | Empty | Add content before Homepage On-sale Products section title |
| Action | storefront_homepage_after_on_sale_products_title | Empty | Add content after Homepage On-sale Products section title |
| Action | storefront_homepage_after_on_sale_products | Empty | Add content after Homepage On-sale Products |
| Action | storefront_homepage_before_best_selling_products | Empty | Add content before Homepage Best Selling Products section title |
| Action | storefront_homepage_after_best_selling_products_title | Empty | Add content after Homepage Best Selling Products section title |
| Action | storefront_homepage_after_best_selling_products | Empty | Add content after Homepage Best Selling Products |
| Filter | storefront_homepage_content_styles | Homepage styles | |
| Filter | storefront_product_categories_args | limit, columns, child_categories, orderby, title | Defines number of category to display, category per column, sort by & parent status of homepage Product Category section |
| Filter | storefront_product_categories_shortcode_args | number, columns, orderby, parent | Defines number of category to display, category per column, sort by & parent status of homepage Product Category section |
| Filter | storefront_recent_products_args | limit, columns, title | Defines number of produts to display, product per column & title for homepage Recent products section |
| Filter | storefront_recent_products_shortcode_args | per_page, columns | Defines number of produts to display and product per column for homepage Recent products section |
| Filter | storefront_featured_products_args | limit, columns, title | Defines number of produts to display, product per column & title for homepage Featured Products section |
| Filter | storefront_featured_products_shortcode_args | per_page, columns | Defines number of produts to display and product per column for homepage Featured Products section |
| Filter | storefront_popular_products_args | limit, columns, title | Defines number of produts to display, product per column & title for homepage Popular Products section |
| Filter | storefront_popular_products_shortcode_args | per_page, columns | Defines number of produts to display and product per column for homepage Popular Products section |
| Filter | storefront_on_sale_products_args | limit, columns, title | Defines number of produts to display, product per column & title for homepage On-Sale Products section |
| Filter | storefront_on_sale_products_shortcode_args | per_page, columns | Defines number of produts to display and product per column for homepage On-Sale Products section |
| Filter | storefront_best_selling_products_args | limit, columns, title | Defines number of produts to display, product per column & title for homepage Best selling section |
| Filter | storefront_best_selling_products_shortcode_args | per_page, columns | Defines number of produts to display and product per column for homepage Best selling section |
Post Archive/ Blog Post Hooks
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Action | storefront_post_content_before | storefront_post_thumbnail | Adds Content before post |
| Action | storefront_post_content_after | Empty | Adds Content after post |
| Action | storefront_loop_post | storefront_post_header | Hook used to display post content |
| storefront_post_meta | |||
| storefront_post_content | |||
| Action | storefront_loop_before | Empty | Adds Content before post loop |
| Action | storefront_loop_after | Empty | Adds Content after post loop |
Single Post Hooks
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Action | storefront_single_post_top | Empty | Display content before Single Post Header |
| Action | storefront_single_post | storefront_post_header | Outputs single post content (title, meta, post content) |
| storefront_post_meta | |||
| storefront_post_content | |||
| Action | storefront_single_post_bottom | storefront_post_nav | Outputs additional single post elements (Next / Previous posts, Comments) |
| storefront_display_comments | |||
| Action | storefront_single_post_before | Empty | Adds content before single post content |
| Action | storefront_single_post_after | Empty | Adds Content After single post content |
| Filter | storefront_single_post_posted_on_html | Single post published date markup |
Page Hooks
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Action | storefront_page | storefront_page_header | display page content in page.php |
| storefront_page_content | |||
| Action | storefront_page_before | Empty | Add content before page content |
| Action | storefront_page_after | Empty | Adds content after page content |
Sidebar & Widget Hooks
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Action | storefront_sidebar | storefront_get_sidebar | Outputs Left & Right Sidebar contents (widgets) |
| Filter | storefront_footer_widget_rows | Define number of footer widget rows | |
| Filter | storefront_footer_widget_columns | Define number of footer widget columns | |
| Filter | storefront_sidebar_args | Defines sidebar arguments |
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Action | storefront_after_footer | Empty | Add content after footer tags |
| Action | storefront_before_footer | Empty | Add content before footer tags |
| Action | storefront_footer | storefront_footer_widgets | Add content between footer tags |
| storefront_credit | |||
| storefront_handheld_footer_bar | |||
| Filter | storefront_copyright_text | Modify storefront copyright text | |
| Filter | storefront_credit_link | Modify Storefront credit link | |
| Filter | storefront_handheld_footer_bar_links | Display a menu intended for use on handheld devices |
WooCommerce Hooks
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Filter | storefront_customizer_woocommerce_extension_css | Style for Booking, Product Reviews & Smart Coupon extensions | |
| Filter | storefront_loop_columns | number of product per row | |
| Filter | storefront_page_option_names | WooCommerce page ids | |
| Filter | storefront_product_thumbnail_columns | Product gallery thumbnail columns | |
| Filter | storefront_products_per_page | WooCommerce products per page | |
| Filter | storefront_related_products_args | Change related products number & column | |
| Filter | storefront_sticky_order_review | enqueue sticky payment script | |
| Filter | storefront_upsells_columns | default upsell number of columns |
Storefront Jetpack Hooks
| Type | Hook | Functions Hooked | What It Does |
|---|---|---|---|
| Action | storefront_jetpack_infinite_scroll_after | Empty | Add content after infinite post loop |
| Action | storefront_jetpack_infinite_scroll_before | Empty | Add content before infinite post loop |
| Action | storefront_jetpack_product_infinite_scroll_after | Empty | Add content after infinite WooCommerce product loop |
| Action | storefront_jetpack_product_infinite_scroll_before | Empty | Add content before infinite WooCommerce product loop |
| Filter | storefront_jetpack_infinite_scroll_args | Infinite Scroll arguments |
Storefront Customizer Hooks
| Type | Hook | What It Does |
|---|---|---|
| Filter | storefront_custom_header_args | Custom header arguments |
| Filter | storefront_customizer_more | loads More_Storefront_Control customizer custom control |
| Filter | storefront_default_accent_color | Link Color |
| Filter | storefront_default_button_alt_background_color | Alternate Button background color |
| Filter | storefront_default_button_alt_text_color | Alternate Button text color |
| Filter | storefront_default_button_background_color | Button background color |
| Filter | storefront_default_button_text_color | Button text color |
| Filter | storefront_default_footer_background_color | Footer background color |
| Filter | storefront_default_footer_heading_color | Footer title color |
| Filter | storefront_default_footer_link_color | Footer link color |
| Filter | storefront_default_footer_text_color | Footer text color |
| Filter | storefront_default_header_background_color | Header Color |
| Filter | storefront_default_header_link_color | Header link color |
| Filter | storefront_default_header_text_color | Header text color |
| Filter | storefront_default_heading_color | heading color |
| Filter | storefront_default_layout | Layout |
| Filter | storefront_default_text_color | Text color |
| Filter | storefront_setting_default_values | Returns an array of the default Storefront Customizer Settings |
Storefront Other Hooks
| Type | Hook | What It Does |
|---|---|---|
| Filter | storefront_custom_background_args | Defines Custom background color & image arguments |
| Filter | storefront_default_background_color | Custom background color |
| Filter | storefront_comment_form_args | Wrap comment reply content between span |
| Filter | storefront_google_font_families | Google font family |
| Filter | storefront_make_me_cute | Enables Comic Sans Font |
| Filter | jetpack_the_site_logo | Jetpack site logo markup |
| Filter | storefront_menu_toggle_text | Storefront menu toggle text |
| Filter | storefront_navigation_markup_template | navigation markup template |
| Filter | storefront_starter_content | Starter content |
| Filter | storefront_starter_content_products | Starter content products |
| Filter | storefront_valid_tour_tasks | Validates and sanitizes a given tasks list |
| Filter | storefront_header_styles | Header styles |
Collins Agbonghama
As someone who uses Storefront as a base for a lot of WooComemrce sites I build for client, I find this resource of immense value. Thanks Towhid for doing this hook reference.