How to Change Products per Page Storefront Theme

Setting up your WooCommerce store and getting the products loaded in is just part of running any web store.

Table of Contents

There are many tutorials, which will show you how to change the number of products per page. However, the main aim of this post is mainly for the Storefront theme.

WooCommerce Storefront Products Per Page

WooCommerce by default allows you to show 10 products per page on the Shop page.

Unfortunately, WooCommerce does not have any settings to change the number of products per row.

The Storefront theme allows you to make customization, as it is very flexible like the WooCommerce plugin.

In this brief tutorial, I will show you how to increase or decrease the number of products per page.

The first method involves the use of a custom PHP script.

This is a developer-friendly solution. However, if you are a WordPress beginner, stick to the end because the second method involves the use of a plugin.

Steps to Change the Number of Products per Page in the Storefront Theme

Here are the simple steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will change the number of products per page in the storefront theme.
Add the following code to the PHP file:

add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {

  // $cols contains the current number of products per page based on the value stored on Options -> Reading

  // Return the number of products you wanna show per page.

  $cols = 9;

  return $cols;

}

To see the outcome, refresh the Shop Page and you will see that the first page has only 9 products.

Steps to Change the Number of Products per Page Using a Plugin

In this section, I will share a procedure that explains how to change the number of WooCommerce products per row and products per page using the WooCommerce Product Archive Customiser.

This plugin allows you to customize WooCommerce product archives. You can change the number of product columns and the number of products displayed per page.

This means that you can toggle the display of core elements and enable some that are not included in WooCommerce core such as stock levels and product categories.

However, the plugin author notes that WooCommerce Product Archive Customiser does not work with all templates.

Nevertheless, I tested this plugin using the Storefront theme and it works. Moreover, it works on the Twenty Seventeen and Genesis templates

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
Then, we are going to install the plugin that I indicated earlier.
To download it directly in the Admin Panel, simply navigate to Plugins > Add New.
After that, you will need to do a keyword search for the plugin ‘WooCommerce Product Archive Customiser’. You need to install and activate it as shown below:
From the Dashboard menu, click on Appearance Menu > Customize.
Navigate down and click on Product Archives. In the Product columns setting, you can add the number of products you want to appear on the Shop page:
If you are satisfied with the changes, click on

Conclusion

In this post, I have shown you how you can change the number of products per page. I have shared two simple ways.

The first one involves the use of a custom PHP code snippet that I have shared. However, this is a developer-friendly solution. If you feel like you are not comfortable handling the code, you can use the WooCommerce Product Archive Customizer.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Change Products per Page WooCommerce Storefront Theme

WooCommerce Storefront Products Per Page

Steps to Change the Number of Products per Page in the Storefront Theme

Steps to Change the Number of Products per Page Using a Plugin

Conclusion

Similar Articles

Related