Posted on

Storefront Theme Visual Hook Guide

Hey WooCommerce Customizers, the Visual Hook Guide is back 🙂

This time I’ve gone beyond expectations: I’ve created the visual hook guide for the Storefront Theme by WooThemes (Free Theme, with 50,000+ active installs). 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

storefront_before_header

storefront_before_content
@hooked ‘storefront_header_widget_region’, 10

storefront_content_top
@hooked ‘woocommerce_breadcrumb’, 10

homepage
@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

storefront_page

Home

Some content from the WordPress page goes here.

storefront_homepage_before_product_categories

Product Categories

storefront_homepage_after_product_categories_title

  • Category1

    Category1 (3)

  • Category2

    Category2 (3)

storefront_homepage_after_product_categories

storefront_homepage_before_recent_products

Recent Products

storefront_homepage_after_recent_products_title

  • Desert1

    Variable Product (2)

    Sale!

    €9.76€263.41 €4.07€18.70


  • Variable Product

    €27.64€460.16


  • Single Product (2)

    5 out of 5

    Sale!

    €280.49 €180.49


  • Simple Product

    Sale!

    €369.11 €180.49

storefront_homepage_after_recent_products

storefront_homepage_before_on_sale_products

On Sale

storefront_homepage_after_on_sale_products_title


  • Simple Product

    Sale!

    €369.11 €180.49


  • Single Product (2)

    5 out of 5

    Sale!

    €280.49 €180.49

  • Desert1

    Variable Product (2)

    Sale!

    €9.76€263.41 €4.07€18.70

storefront_homepage_after_on_sale_products

storefront_homepage_before_best_selling_products

Best Sellers

storefront_homepage_after_best_selling_products_title


  • Simple Product

    Sale!

    €369.11 €180.49


  • Single Product (2)

    5 out of 5

    Sale!

    €280.49 €180.49

  • Desert1

    Variable Product (2)

    Sale!

    €9.76€263.41 €4.07€18.70

storefront_homepage_after_best_selling_products_products

 

storefront_before_footer

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

© Business Bloomer 2016
Storefront designed by WooThemes.

storefront_after_footer

Storefront Default add_actions


// These are actions you can unhook/remove!

// SIDEBAR

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

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

// FOOTER

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

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

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

// POSTS

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

// PAGES

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, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

43 thoughts on “Storefront Theme Visual Hook Guide

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

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

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

    1. Thank you Adam 🙂

  4. 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>.';
    }
    
    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)

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

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

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

    1. I’m afraid not Mohammed 🙂

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

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

  10. Very useful – thank you!

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

      http://prntscr.com/f0aiws

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

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

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

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

    1. Thank you so much Ilhan!

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

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

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

    1. Thank you Mark 🙂

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

  19. 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're writing code, please wrap it between: [php] code_here [/php]

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.