Where to edit the code for the Storefront Homepage template

Hello, If you setting the static home page you have to edit the index.php file for homepage. But if you are using a specific template for home page, you have to edit that template. Don’t forget to activate child theme. ??
Thanks

@wen Solutions,
Thank you for your comment.

I am already using a child theme and it’s using a template-homepage.php for the homepage.

And here is the content,

<?php
/**
 * The template for displaying the homepage.
 *
 * This page template will display any functions hooked into the <code>homepage</code> action.
 * By default this includes a variety of product displays and the page content itself. To change the order or toggle these components
 * use the Homepage Control plugin.
 * https://www.ads-software.com/plugins/homepage-control/
 *
 * Template name: Homepage
 *
 * @package storefront
 */
get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			/**
			 * @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
			 */
			do_action( 'homepage' ); ?>

		</main><!-- #main -->
	</div><!-- #primary -->
<?php get_footer(); ?>

So, as you can see it doesn’t have the actual code that I’m able to edit and I can’t figure out where is the code itself stored.

As all the homepage contents are hooked in a hook ‘homepage’ in file ‘hooks.php’, you have to go through each function that are hooked in that file (hooks.php) in a hook called ‘homepage’. So, search the theme folder for those hooked functions and edit them one by one. This is the only way you can do.

Thanks!

If you choose to edit any of those functions please do not do it in Storefront core or your changes will be lost when an update is released.

Instead, you can copy/paste the function into your own child theme or a custom plugin and it will overwrite the core function. Here’s a plugin you can use to house customisations like this: https://github.com/woothemes/theme-customisations

Cheers

Thank you both so much.
I’ve already found the hooks.PHP file and copied it to my child theme folder but the changes I am doing in it aren’t working.

Do I have to copy/paste the functions into my child theme functions file and edit them there?
Or use the customizations plugin?

Do I have to copy/paste the functions into my child theme functions file and edit them there?

Copy/paste them into your child themes functions.php file, or into the customisations plugin. Both will work ??

Thank you @jameskoster,
Will try that, I installed the plugin and will see how it works.

But if I want to add something to the homepage, like new content, where do I do that?

The easiest way would be to just add your content to the page itself.

Remember you can re-order and toggle each homepage component using our Homepage Control plugin.

Many thanks.
Will try that.

If you choose to edit any of those functions please do not do it in Storefront core or your changes will be lost when an update is released.

Instead, you can copy/paste the function into your own child theme or a custom plugin and it will overwrite the core function. Here’s a plugin you can use to house customisations like this: https://github.com/woothemes/theme-customisations

Cheers

As I always prefer to use as few plugins as possible I would prefer to use the method described above.

However, when I locate the hook code that correspondents with the modules shown on the homepage (in storefront/inc/structure/hooks.php) and copy that bit of code to the functions.php of my childtheme it doesn’t seem to do anything.

Here’s what I have in functions.php:

/**
 * storefront homepage hooks edited
 */
add_action( 'homepage', 'storefront_homepage_content',		10 );
add_action( 'homepage', 'storefront_product_categories',	20 );
add_action( 'homepage', 'storefront_recent_products',		30 );

Did I forget something or did I misunderstand your explanation above?

Hope to hear from you soon.

Child themes are loaded before parent themes so this wont work. You’ll need to wrap that code in a function hooked into init so that it is executed after the parent theme has loaded. Something like;

add_action( 'init', 'jk_edit_homepage' );
function jk_edit_homepage() {
add_action( 'homepage', 'storefront_homepage_content',		10 );
add_action( 'homepage', 'storefront_product_categories',	20 );
add_action( 'homepage', 'storefront_recent_products',		30 );
}

Note that your code will simply add duplicates of sections that already exist. You can remove them using remove_action().

Hi James,

Thanks a lot for your great help. I did exactly as you said and that works like an absolute charm, see below:

// homepage modules removed to make it more lean and mean

add_action( 'init', 'jk_edit_homepage' );
function jk_edit_homepage() {
remove_action( 'homepage', 'storefront_featured_products', 40 );
remove_action( 'homepage', 'storefront_popular_products', 50 );
remove_action( 'homepage', 'storefront_on_sale_products', 60 );
}

Now only the modules show that I actually want on the homepage, way better.

I know your homepage control plugin does the same thing, but this saves using an extra plugin.

In another thread you informed me that the homepage control plugin is still under development (even though it hasn’t been updated for a year and doesn’t list current WP compatibility), I think it would be smart to inform the users of that plugin of the current status as people will think it has been abandoned.

Good point. We’ll do that asap.