By 
Looking for a way to add a catchy text or subtitle below the featured product title in your WooCommerce storefront theme? This article is a quick guide on how you can add the content on the space below the storefront featured product title. If you also missed out on the other post on how to remove the Storefront footer link you should check it out too.
Add Content Below Featured Product Title Storefront
By the end of this article you will be able to add a title below the featured product’s title as shown in the picture below:
The WooCommerce Storefront theme has a lot of actions and filters that you can insert sections of content using HTML, PHP, and JavaScript into its core templates. These add_action() functions can help you to customize your site to your needs. Most of them are available in the WooCommerce Documentation site. This means that you need to create a function and find the right hook to use.
However, if you are not familiar with the right hooks to use, you can check the Storefront Hooks: Actions and filters available on this link.
Steps to Add Content Below Featured Product Title Storefront
- Log into your WordPress site and access the Dashboard as the admin user.
- From the Dashboard menu, click on the Appearance Menu > Theme Editor Menu. When the theme editor page is opened, look for the theme functions file that has the extension functions.php. Open this functions file where we will add the function that will add content below the featured title.
- Add the following code to the functions.php and add the custom message or image that you want to add. For this tutorial, we are going to add a title ‘These are some of our best products that you need to consider!’
// Insert text below the Featured Products title
function add_featured_text_example() {
// Echo out content
echo '<p>' . esc_html__( 'These are definitely our best products to consider!', 'storefront' ) . '</p>';
}
add_action( 'storefront_homepage_after_featured_products_title' , 'add_featured_text_example' );
- Save the changes on the functions.php file and visit the front page on your WooCommerce site where the featured products are listed. Check to see if your page looks like this:
How the Code Works
This code can be explained in the following two subtopics:
- Creating a function.
- Finding the best hook.
Creating a Function
Creating a function is an easy thing to do, as you just need to choose something that makes sense. This means that you are not limited to the wording, so long as you will be able to remember the word.
For example, add_ featured_text_njengah() . This function can be used for displaying the text that you want to display. For example, echo "<p>These are some of our best products that you need to consider!</p>".
Finding the Best Hook
Functions created need to be placed in a certain defined location on your site. This is where hooks come in. You need to identify the right hooks that are active on the homepage where the featured products are located. This can be easily found in the WooCommerce Documentation site.
Additionally, you can use a plugin to check the available hooks. A plugin like Hookr.io is a great choice. This plugin helps you to get a visual presentation of all the hooks that are available on a page.
Hookr.io is a feature-rich plugin that is free and it inspects augments pages to illustrate which actions & filters run during the page life cycle. This would cut down on the time that would be wasted trying to look for the best hook or filter in a third party site.
Here are some of the hooks that can be used on the home page:
storefront_homepage_before_featured_products
storefront_homepage_after_featured_products_title
storefront_homepage_after_featured_products
However, for this tutorial we are just going to use this hook that shows up just below the “featured products” title:
storefront_homepage_after_featured_products_title
Conclusion
In this article, we have highlighted how you can add content below the featured product. The code has been explained and by now, you can create a function and finding the hook. Additionally, you can add some CSS styling or a class in the <p> element. Moreover, you can add any text that you need or an image as well using an image tag. The possibilities are endless.
Comments are closed.