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!

Storefront Theme – Homepage Hooks


@hooked ‘storefront_header_widget_region’, 10
@hooked ‘woocommerce_breadcrumb’, 10


@hooked ‘storefront_homepage_content’, 10
@hooked ‘storefront_product_categories’, 20
@hooked ‘storefront_recent_products’, 30
@hooked ‘storefront_featured_products’, 40
@hooked ‘storefront_popular_products’, 50
@hooked ‘storefront_on_sale_products’, 60
@hooked ‘storefront_best_selling_products’, 70



Some content from the WordPress page goes here.


Product Categories


  • Category1

    Category1 (3)

  • Category2

    Category2 (3)



Recent Products


  • Desert1

    Variable Product (2)


    €9.76€263.41 €4.07€18.70

  • Variable Product


  • Single Product (2)

    5 out of 5


    €280.49 €180.49

  • Simple Product


    €369.11 €180.49



On Sale


  • Simple Product


    €369.11 €180.49

  • Single Product (2)

    5 out of 5


    €280.49 €180.49

  • Desert1

    Variable Product (2)


    €9.76€263.41 €4.07€18.70



Best Sellers


  • Simple Product


    €369.11 €180.49

  • Single Product (2)

    5 out of 5


    €280.49 €180.49

  • Desert1

    Variable Product (2)


    €9.76€263.41 €4.07€18.70




@hooked ‘storefront_footer_widgets’, 10
@hooked ‘storefront_credit’, 20

© Business Bloomer 2016
Storefront designed by WooThemes.


Storefront Default add_actions

// These are actions you can unhook/remove!


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


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


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


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

add_action( 'storefront_homepage', 'storefront_homepage_header', 10 );
add_action( 'storefront_homepage', 'storefront_page_content', 20 );


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


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

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

47 thoughts on “Storefront Theme Visual Hook Guide

  1. 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)



    Keep up the great work!

    1. Thanks for that! I’ve now updated it 🙂

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

    1. Absolutely right, Franz, thank you!

  3. 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 !

    1. Awesome, thanks a million 🙂

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

    1. Thank you Adam 🙂

  5. 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
     * @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="" target="_blank">Rodolfo Melogi</a>.';
    1. Great work, thanks so much Łukasz 🙂

    2. 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)

    3. 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
       * @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
      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 );
    4. Nice 🙂

  6. 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.


  7. 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?

    1. 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 🙂

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

    1. I’m afraid not Mohammed 🙂

  9. 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!

    1. 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

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

    Thank you very much

    1. Urano, thanks for your comment! Good idea, I’ll see what I can do 🙂

  11. Very useful – thank you!

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

    1. 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!

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

    3. As long as I know, if you go to the Categories page, you can drag/drop them to define your custom order 🙂

  13. 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 ?


  14. 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.

    1. Hey SkyRo thanks for your comment! If you paste here your PHP snippet, I’ll take a quick look 🙂

  15. thank you so much..your help about woocommerce and storefront appreciated. 🙂

    1. Thank you so much Ilhan!

  16. 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)?

    1. 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 🙂

  17. 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?

    1. 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 🙂

  18. Awesome, exactly what I was looking for, thanks! 🙂

    1. Thank you Mark 🙂

  19. 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 );
    1. ah found it! It should be best_selling_products

    2. Awesome! Glad you figured that out! And thanks a bunch – I just added this hook and the “Best Sellers” section to the visual guide 🙂

    3. 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. :/

  20. 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).

    1. Thank you Arnold, much appreciated 🙂

Questions? Feedback? Support? Leave your Comment Now!

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.