Storefront Filters example: Change the number of products displayed per page

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 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 top

First, 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 top

Second, 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 top

Finally, we need to add a filter that adds the created function to the right hook. 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: