Storefront Actions example: Adding content below the featured product title

Note: This is a Developer level doc. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.
Storefront has a lot of add_action() functions (go here for an overview). These allow you to insert sections of content using HTML, PHP, Javascript into its core templates. For example, say you want to add a description or even an image below the “featured products” section of your homepage.

Create a function

↑ Back to top
First, create a function. It can be called whatever so choose something that makes sense. For example: add_featured_text_example(). The function is displaying–or echoing–some text: echo "<p>These are definitely our best products to consider!</p>";.

Find the right hook

↑ Back to top
Second, find the right location (or hook) to use. A plugin like Hookr.io will allow get a visual overview: This of course also adds all of the WooCommerce hooks that are active on the homepage, but it makes it easy to see which Storefront hooks we might consider:
  • storefront_homepage_before_featured_products
  • storefront_homepage_after_featured_products_title
  • storefront_homepage_after_featured_products
Of these, storefront_homepage_after_featured_products_title is the one that shows up below our “featured products” title. A full reference list of the Storefront hooks can be found here.

Add an action

↑ Back to top
Next, we need to insert some text. In WordPress terminology, that’s adding an action. We’re adding the action (add_action()) in the right spot by first using the hook (storefront_homepage_after_featured_products_title), and then calling the function we’ve just created (add_featured_text_example) The result of that is the following snippet:
We’ll need let our theme to know to use the code. In order to do that,  you can paste the snippet in the functions.php file of your child theme. The result will be the following: A last step would be to add either some styling or a class to the <p> element to add some custom CSS, but that would be another tutorial.
Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.