Storefront has a lot of filters (go here for an overview). These allow you to change the output of how things are displayed in the theme.
For example, you could want to change the shop page template to only display 8 products instead of the default 12.
Create a function
↑ Back to topFirst, we need to create a function. We can call it whatever we want so here we’ll opt for alter_sf_products_per_page (). Since we want to change the default 12 to 8, that is what we need to add: return 8;.
Find the right hook
↑ Back to topSecond, find the right place (or hook) to add this filter to. In the Storefront filters reference guide, the hook we find is storefront_products_per_page.
Add a filter
↑ Back to topFinally, we need to add a filter that adds the created function to the right hook.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function alter_sf_products_per_page() { | |
| // Return the number of products per page ( default: 12 ). | |
| return 8; | |
| } | |
| add_filter('storefront_products_per_page', 'alter_sf_products_per_page' ); |
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:
