Visual Hook Guides

Storefront Theme Visual Hook Guide

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!

Table Of Contents
  1. 1. Storefront Theme > Header Hooks
  2. 2. Storefront Theme > Footer Hooks
  3. 3. Storefront Theme > Sidebar Hooks
  4. 4. Storefront Theme > Standard Page Hooks
  5. 5. Storefront Theme > "Homepage Page Template" Hooks
  6. Home
  7. Product Categories
  8. Recent Products
  9. Featured Products
  10. Top Rated Products
  11. On Sale
  12. Best Sellers
  13. 6. Storefront Theme > Post Hooks

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

3. Storefront Theme > Sidebar Hooks

add_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );

4. Storefront Theme > Standard Page Hooks

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 );

Related content

  • WooCommerce: Hide “Showing x-y of z results” @ Shop Page
    This is quite an annoying thing in WooCommerce when you have just a few products. Besides, if you only have 1 product in a given category, the notice “Showing the Single Result” will appear on top of the category page. So, how do we remove the whole “Showing 1–15 of 178 results” element from the […]
  • WooCommerce: Add an Icon to the Add to Cart Buttons
    Ecommerce is all about user experience, and making it easier for people to add to cart and checkout smoothly. Reducing the number of checkout fields is a great idea for example – as well as graphically communicating your number 1 objective: “please add to cart now!”. So, how do you add an icon (or an […]
  • WooCommerce + Storefront Theme: Hide Homepage Title
    The Storefront theme displays the homepage H1 title by default, no matter if you use the “Default” or the “Homepage” page template. Of course, you could do it via CSS, with a simple “display:none”. Even better, you could completely avoid loading the homepage title by using PHP (SEOs out there: better not to load an […]
  • WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now
    I just spent the last 3 days in Porto with another 2,300 WordPressers at the first in-person WordCamp Europe since Berlin 2019. I had a blast, held a nice (yet long) workshop, spoke to many, but got tired too soon. Later on, I realized that that tiredness was something more serious – in fact I […]
  • WooCommerce: How To Change Product Image Sizes
    WooCommerce lets you resize the product images on Single Product and Shop pages from Appearance > Customize > WooCommerce > Product Images. Besides, you don’t have to manually regenerate the images after resizing them with an additional plugin, as WooCommerce can crop, resize and automatically regenerate image sizes out of the box. Despite this seems […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

59 thoughts on “Storefront Theme Visual Hook Guide”

  1. Andrew Pollock

    If a site is using Avada instead of storefront, can I change the hook to avada_woocommerce and use the same numbers for positions?

    Reply
    1. Rodolfo Melogli

      Unfortunately you can’t do that. Avada has its own hooks, so you need to study its codebase. Maybe one day I’ll publish the Avada Visual Hook Guide!

      Reply
  2. Morgan

    Hello Mr. Rodolfo

    Again, i need your help

    i would like to remove my footer widget (not include footer credit) so i run this code

    if(!is_woocommerce() && !is_cart() && !is_checkout()) {
     do_action( 'storefront_footer' );
} else {
     remove_action('storefront_footer', 'storefront_footer_widgets', 10);
}

    but my footer credit also disappear on woocommerce page
    what i want the footer credit still remain there, could yoplease correct my code

    Reply
    1. Rodolfo Melogli

      Hi Morgan, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  3. Morgan

    Hello, Mr. Rodolfo

    im using storefront for blogging instead of an online store. so i remove secondary menu and product search by using this code

    function remove_storefront_default_actions() {
	remove_action( 'storefront_header' , 'storefront_secondary_navigation' , 30 );
	remove_action( 'storefront_header', 'storefront_product_search', 40 );
}
add_action( 'init', 'remove_storefront_default_actions' );

    now id like to put an element (banner ad) size 728x90px, how can i do that ?

    Reply
    1. Rodolfo Melogli

      Hi Morgan, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  4. Morgan

    Wow, awesome

    this articles really full of tons benefit becuase the visualizations of that hooks. since we can easily customize storefront theme using their hooks

    Reply
    1. Rodolfo Melogli

      Thanks!

      Reply
  5. Lauren Mitchell

    Hello How can i remove homepage sidebar?

    Reply
    1. Rodolfo Melogli

      Hi Lauren, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  6. Mez

    Maaaate! You saved me so much time testing every WC hook from A to Z to see where they show up and how they should be formatted! This Visual Guide is THE BEST resource on the net, even better than WC docs… You’re a legend! They should buy you a six-pack for doing their job for them πŸ˜›

    Reply
    1. Rodolfo Melogli

      Ahah thank you!

      Reply
  7. daMask

    Hey Rodolfo,
    Thanks for all the resources you put up, you provide a fantastic stepping stone to dev’s looking at getting into WP.

    I also wanted to point out, I think they’ve moved 

    (@hooked β€˜woocommerce_breadcrumb’, 10)

    into 

    storefront_before_content

    Keep up the great work!

    Reply
    1. Rodolfo Melogli

      Thanks for that! I’ve now updated it πŸ™‚

      Reply
  8. Franz

    Hi,

    Thanks for this visual hook guide, helpful.

    I think there is a mistake in the “Storefront Default add_actions // POSTS” section though.

    it’s not

    add_action( ‘storefront_single_post_after’, ‘storefront_post_nav’, 10 );

    but well

    add_action( ‘storefront_single_post_bottom’, ‘storefront_post_nav’, 10 );

    Reply
    1. Rodolfo Melogli

      Absolutely right, Franz, thank you!

      Reply
  9. Attila-Csaba Szabo

    Absolutely helpful, single biggest resource on this topic (hooks for themes and woo), better then the official docs.
    All hats down, thank you very much for taking the time to put these resources together. As a blogger myself, I know it took a lot of time and effort.

    Thank you !

    Reply
    1. Rodolfo Melogli

      Awesome, thanks a million πŸ™‚

      Reply
  10. Adam

    Hi, it is absolutely great to use your tutorials and resources. Thank you very much!

    Reply
    1. Rodolfo Melogli

      Thank you Adam πŸ™‚

      Reply
  11. Łukasz Bogaczek BLACK SUN

    Hey! Using Your AWESOME tutorials and Visual Hooks Guides, I just figured out how to add custom text into footer credits (what is not so easy in free StoreFront theme). If You think it’s useful, feel free to create tutorial πŸ™‚ :

    /**
 * @snippet       Custom Credits in footer
 * @how-to        as below
 * @sourcecode    https://businessbloomer.com/
 * @author        Łukasz Bogaczek
 * @testedwith    WooCommerce 3.3.4
 */
add_action( 'storefront_footer', 'storefront_credit', 20 );
function storefront_credit() {
echo '&copy; 2018 YourCompany. All Rights Reserved. Design <a href="https://businessbloomer.com/" target="_blank">Rodolfo Melogi</a>.';
}
    Reply
    1. Rodolfo Melogli

      Great work, thanks so much Łukasz πŸ™‚

      Reply
    2. Adam

      Hi, thanks for the snippet, but unfortunately when trying to run it through Snippets plugin I get error that I cannot redeclare already declared storefront_credit() (previously declared in /home/domains/mysite/public_html/wp-content/themes/storefront/inc/storefront-template-functions.php:128)

      Reply
    3. Derek Smith

      Thanks again Rodolfo for your wonderful insights and love for WooCommerce! Here is a little more in depth footer credits modification. It removes the original action and replaces it with the top function (new_storefront_credits) so there is not chance of getting an error. Also it pulls the year from PHP so you never have to update it again (I always wince when I see copyrights from 2010..). As well it adds the home link to the company name.

      
/**
 * @snippet       Custom Credits in footer
 * @how-to        as below
 * @sourcecode    https://businessbloomer.com/
 * @author        Timbre Design Studio
 * @testedwith    WooCommerce 3.5.1
 */
function new_storefront_credits() {
	?>
	Β©  <a href="/" title="" rel="nofollow">Your Company Name</a> - All Rights Reserved
	<?php
}

function storefront_footer_credits() {
	remove_action( 'storefront_footer', 'storefront_credit', 20 );
	add_action( 'storefront_footer', 'new_storefront_credits', 20 );
}
add_action( 'init', 'storefront_footer_credits', 80 );
      Reply
      1. Rodolfo Melogli

        Nice πŸ™‚

        Reply
  12. Cisco

    Merci beaucoup Rodolfo !

    Your resources are amazing, i’m always surprise this kind of stuff is not provided by WP Team itself, but hopefully you did it and it’s so helpful, thanks for sharing.

    Cisco

    Reply
    1. Rodolfo Melogli

      Excellent πŸ™‚

      Reply
  13. Andrew

    Great post, really helpful, bookmarked it instantly! One thing I can’t quite gather, being new to this – is it possible to add a sidebar to the Storefront Homepage? I managed to do add_action (homepage, storefront_get_sidebar) but that just shows it in its own horizontal section, which looks terrible. Is it possible to add a real sidebar?

    Reply
    1. Rodolfo Melogli

      Hey Andrew, thanks so much for your comment! If you had a static homepage, you could add a sidebar from the template settings… if you’re using the default Storefront homepage and there is no option in the “Customizer”, then you’d also need to combine that PHP with some CSS to reduce the main content width and move the sidebar to its right. Hope this helps πŸ™‚

      Reply
  14. Mohammed Azharuddin

    I am using X-pro theme. Do these hooks work?

    Reply
    1. Rodolfo Melogli

      I’m afraid not Mohammed πŸ™‚

      Reply
  15. Mohamed Elmikh

    Hey i want to hide short description on the product page and show only the image and add to cart what i have to do ? Can you help me!

    Reply
    1. Rodolfo Melogli

      Mohamed, thanks so much for your comment! Unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

      Reply
  16. Urano

    Great visual guides. How about convert to images o PDF in order to print them in poster?

    Thank you very much

    Reply
    1. Rodolfo Melogli

      Urano, thanks for your comment! Good idea, I’ll see what I can do πŸ™‚

      Reply
  17. Stefano

    Very useful – thank you!

    Reply
    1. Rodolfo Melogli

      Prego πŸ™‚

      Reply
  18. Hector

    Hi, wonderful post. Could you tell me how I can order categories on homepage?

    Reply
    1. Rodolfo Melogli

      Hey hector, thanks for your comment! This might be too custom for a blog reply, however could you provide a screenshot so that I can fully understand? Thank you!

      Reply
      1. Hector

        i.e. Move the last category to the first place.

        https://prntscr.com/f0aiws

        Reply
        1. Rodolfo Melogli

          As long as I know, if you go to the Categories page, you can drag/drop them to define your custom order πŸ™‚

          Reply
  19. pedro

    Hi Rodolfo,

    Thanks for all those help guide. Very useful!

    Regarding product page listing (which is my case : my shop homepage directly list products – image/productname/price/addtocart – ), do you know any hooks that would go just below the price, such as image/productname/price/XXX/addtocart ?

    Thanks

    Reply
    1. Rodolfo Melogli

      Hola Pedro! Try with: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

      Reply
  20. SkyRo

    Hello
    amazing place it is very helpful, but I need help.
    I’m trying to add a section in which the Home page , but I have no idea how to connect “storefront_homepage_after_best_selling_products_products” or “storefront_before_footer” with my function.
    I’m trying to add on top of the foot a few pictures and text as one div, and it did not work.
    if you can help thank you very much.

    Reply
    1. Rodolfo Melogli

      Hey SkyRo thanks for your comment! If you paste here your PHP snippet, I’ll take a quick look πŸ™‚

      Reply
  21. İlhan Yaşar

    thank you so much..your help about woocommerce and storefront appreciated. πŸ™‚

    Reply
    1. Rodolfo Melogli

      Thank you so much Ilhan!

      Reply
  22. Sam

    Hello Rodolfo, i am using wordpress 4.6.1 with theme- Storefront Version: 2.1.5.
    Is there any hook to move cart from menu-bar to header(just next to search box)?

    Reply
    1. Rodolfo Melogli

      Hey Sam thanks for your comment! This is pretty advanced and custom I’m afraid, there is no action you can remove and re-add – instead you will need to play with “pluggable functions” to override the default behaviour of Storefront in this case. Hope this helps a little πŸ™‚

      Reply
  23. Ronen

    Great post.
    I was wondering if you can say something about dynamically updating the cart value on storefront theme (the one in the header/menu) that is always visible.

    Some plugins (currency changer) require to add a hook and recalculate the total.

    Any idea how?

    Reply
    1. Rodolfo Melogli

      Hey Ronen, thanks for your feedback! What currency switcher plugin are you using? If well developed, this function should work out of the box. Let me know πŸ™‚

      Reply
  24. Mark Law

    Awesome, exactly what I was looking for, thanks! πŸ™‚

    Reply
    1. Rodolfo Melogli

      Thank you Mark πŸ™‚

      Reply
  25. Ruth Maude

    Rodolfo,

    Thank you so much. I’m almost there thanks to this awesome list!

    I can’t see a hook for best sellers. I tried this but it didn’t work

    remove_action( 'homepage', 'storefront_best_sellers_products', 70 );
    Reply
    1. Ruth Maude

      ah found it! It should be best_selling_products

      Reply
      1. Rodolfo Melogli

        Awesome! Glad you figured that out! And thanks a bunch – I just added this hook and the “Best Sellers” section to the visual guide πŸ™‚

        Reply
    2. Adam

      I have a problem with this one – it just dont work on my storefront. It is in functions.php, also checked for typos and stuck here. :/

      Reply
  26. Arnold

    Great as usual!

    Don’t use the Storefront theme, but your visual hook guide saved me many hours of trouble (especially the single product page and cart page guide).

    Reply
    1. Rodolfo Melogli

      Thank you Arnold, much appreciated πŸ™‚

      Reply
Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *