How to Change Storefront Number of Products Per Row

WooCommerce Storefront Number of Products per RowWooCommerce by default allows you to show 3 to 4 products per row. However, there are no WooCommerce settings to change the number of products per row. The Storefront theme is very flexible to customization and you can increase or decrease the number of products per row. In this brief guide, I will share with you two ways on how you can do that.

default products per row

WooCommerce Storefront Number of Products Per Row

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 Row in the Storefront Theme

Here are the simple steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. 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 row in the storefront theme.
  3. Add the following code to the php file:
/**

 * @snippet       1 Column Layout @ WooCommerce Shop

  */
add_filter( 'loop_shop_columns', 'loop_columns', 999 );

function loop_columns() {

   return 5;

}
  1. To see the outcome, refresh the Shop Page and you will see this:products per row

Steps to Change the Number of Products per Row 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.WooCommerce Product Archive Customiser plugin

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 and 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:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. Then, we are going to install the plugin that I have 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:Activate the plugin
  3. From the Dashboard menu, click on Appearance Menu > Customize.
  4. Navigate down and click on Product Archives. In the Product columns setting, you can add the number of products you want to appear in a row in the Shop page:Product Columns
  5. If you are satisfied with the changes, click on

Conclusion

In this post, I have shared two methods that you can use to change the number of products per row on the Shop page. The first method involves the use of a custom PHP script that I have created. This code snippet needs to be added to the function.php file of your Storefront theme.

However, if you are not too tech-savvy, consider using the second method that involves the use of a plugin. The plugin is called WooCommerce Product Archive Customiser. To be sure, you can test the product archive pages to verify that your changes are applied.

Similar Articles