Setting up your WooCommerce store and getting the products loaded in is just part of running any web store.
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; }
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 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.
Similar Articles
- How to Hide All Products From Shop Page in WooCommerce
- How to Sort WooCommerce Categories for Better User Experience
- How to Hide WooCommerce Products from Search Results
- How To Quickly Find Your Product ID in WooCommerce
- How to Set WooCommerce Storefront Thumbnail Sizes
- How to Add Product After Storefront Setup [Beginner Guide]
- How to Disable Payment Method for Specific Category
- How to Add Extra Field in WooCommerce Checkout Form
- How to Display WooCommerce Products By Category
- How to Hide Out-of-Stock Variations in WooCommerce
- How to Add Product Image WooCommerce Checkout Page
- How to Put WooCommerce Cart and Checkout on One Page
- How to Use WooCommerce Product Attributes Step by Step [Complete Guide]
- How to Hide Add to Cart Button in WooCommerce
- Hide or Remove the Quantity Field from WooCommerce Product Page
- How to Hide the WooCommerce Coupon Code Field
- How to Disable Ship To Another Address Option
- How to Add Categories to WooCommerce Products
- How to Display Featured Products on Storefront Homepage
- How to Adjust WooCommerce Storefront Height of Header