WooCommerce 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.
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:
- 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 row in the storefront theme.
- 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; }
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.
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:
- Log into your WordPress site and access the Dashboard as the admin user.
- 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:
- 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 in a row in the Shop page:
- 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
- How to Auto Approve Orders in WooCommerce
- How to Change Font Size WooCommerce Storefront Theme
- How to Disable Payment Method for Specific Category
- How to Add Woocommerce Product from Front end
- How to Remove Sidebar from Product Page in WooCommerce Themes
- How to Adjust WooCommerce Storefront Height of Header
- How to Add Product After Storefront Setup [Beginner Guide]
- How to Change Button Color Storefront Theme
- How to Add Custom Order Status in WooCommerce
- How to Hide Add to Cart Button in WooCommerce
- How to Add Product Image WooCommerce Checkout Page
- How to Put WooCommerce Cart and Checkout on One Page
- How to Remove Search Box Storefront Theme
- How to Remove Cart from Storefront Theme Header
- How to Rename Order Status Messages in WooCommerce
- How to Disable Reviews WooCommerce Storefront Theme
- How to Set WooCommerce Storefront Thumbnail Sizes
- How to Display Featured Products on Storefront Homepage
- How to Hide Out of Stock Variations in WooCommerce
- How to Remove Breadcrumbs WooCommerce Storefront