How to Change the WooCommerce Number of Products per Page?

WooCommerce has been becoming more and more popular partly because it gives shop owners various options to customize their online shop. You can set up the appearance of your page in almost every aspect as you want to enhance your shop pages’ usability, which may help you increase product visibility, better the purchasing flow, and improving your conversion rate.

One of the most interesting WooCommerce customization options is the ability to change the WooCommerce number of products per page.

In this article, we are covering the main ideas on the reason why you should think about edit the number of products on a WooCommerce shop page, and presenting the 3 ways for you to do it without touching a line of code.

Keep reading and getting started!

Why Change the WooCommerce Number of Products per Page?

By default, there are 16 products on a WooCommerce shop page, which are divided into 4 rows and 4 columns. For each product, there’s typically a large product image, product name, price, and an Add to Cart button.

Although this can work well for small stores that sell a few products, it isn’t the ideal solution for every online store.

There are many reasons why you should consider changing the default product quantity per page on your WooCommerce store’s main shop page.

• In case, you are selling a lot of products and multiple product pages. the default WooCommerce shop page layout can make it difficult for shoppers to find the item they’re looking for. They will have to scroll through so many pages of products, which can reduce the shopping experience and take the customers out of your site.
• When you want to enhance user experience and convert more sales by showing more product details and changing the page’s overall view.
• To make your page more functional. This may be because you have too many products on your site and various images or widgets do not come up properly.
• You want to impress shoppers by changing the image sizes of products and other aspects of your WooCommerce shop page layout.

Now let’s take a look at some specific cases when you should change the products’ quantity displayed on a page.

3 Ways to Change the WooCommerce Number of Products per Page?

There are many ways for you to change the product’s quantity on a page; however, in this blog we are mentioning the top easy processes to do that. Keep reading and select the most suitable method to meet your needs.

Way #1: Default WooCommerce Theme settings

The most simple way to change the WooCommerce number of products per page is by customizing the default theme’s settings in WooCommerce, however, first, make sure your theme allows it. If it doesn’t, move on to the second solution.

Luckily, I install Woostify theme for my online store. The Woostify theme is completely built for WooCommerce shop, so there is no conflict between the WooCommerce and the theme settings.

To change the quantity of products per shop page, you can follow the steps below:

Step 1: From the WordPress dashboard, go to Apperance > Customize:

Step 2: You will see a list of customization options in the left sidebar. Next, navigate to the WooCommerce settings from the list, and then click the Product Catalog.

Step 3: Scroll down the left sidebar, you will see the Products per row and Product Per Page. These settings will help you set up the number of products per each row and on each page.

You can set the number of products in each row by moving the configuration bar and change the number of products on each page by typing the desired number.

Way #2: Woostify theme settings

If the first way does not meet your requirements and you want more customization, you can try the second method by using the specific widget of Woostify theme.

Woostify offers a unique WooBuilder Elementor addon that can help you make all changes on your WooCommerce shop pages. Of course, you can change the number of products on each page as you want.

To edit the number of products per page, just refer to the simple process below:

Step 1: Enable the WooBuilder addon in your store.

From the WordPress menu, go to Woostify Options. Then you will see a list of functionalities that the theme provides. Find the WooBuilder option and click Active to turn it on.

Step 2: Go to the WooBuilder setting.

Step 3: Choose the page you want to customize.

There are 2 types of pages where you can display your products: The shop page and the category page.

Here, you can create a new shop/ category page by clicking on Add New button or make changes on the shop pages you have got.

In this tutorial, I will choose to edit the number of products on the shop page as an example. If you do not have a shop page, you can create it by following this guideline.

Step 4: Customize the number of products on a shop page.

In the shop page, we use the Woostify- Products widget to display the products.

With the Woostify- Products widget, you can customize all information on the products and products’ layout, of course, including the total number of products per page. The details are listed as below:

• General: In this section, you can:
  • Edit the columns of products from 1 to 6.
  • Enable Pagination
  • Show result count
  • Show order

• Query: Here, you are allowed to:
  • Change the WooCommerce number of products per page by typing a number in the Total Products area. (Note: the number you write here must be less than the products you have in your store.)
  • Choose the source of products to showcase. They may be the products on sale off, featured products, latest products, manually selected products, and the current query items.
  • Customize orders’ information.

• Pagination: In this section, you can:
  • Select the position of the products: left side, middle, or right side.
  • Change the space between products.

After completing, remember to Publish your template and save your changes.

Bonus: Change the number of products per page and the number of columns on mobile and tablet.

Once finishing customizing your shop page layout on the desktop screen, you should check if it also performs well in other screen sizes such as mobile and tablet.

You can chect it by clicking in the screen icon at the bottom of the left side bar, then choose the device you want to see.

Most of the changes we have made with the shop page on the desktop screen will not fit the mobile and tablet screens, so you need to fix the number of products per page, and the number of columns per page. The process is the same as what we do earlier.

When you finish, just click the Update button to save the changes.

Way #3: Code Snippet

If you couldn’t use both of the 2 methods in your WooCommerce store, you can try to add code snippets to your theme files.

In this way, you need to create a child theme to make sure that your theme will not be affected by adding other codes.

From the WordPress dashboard, head to Appearance > Theme Editor, then follow the steps below to change the number of products per page, and the number of column.

Change the number of products per page

Find the functions.php file, copy the below code snippet and paste it at the end of the file.

// Change the Number of WooCommerce Products Displayed Per Pageadd_filter( 'loop_shop_per_page', 'lw_loop_shop_per_page', 30 );function lw_loop_shop_per_page( $products ) { $products = 16; return $products;}

If the above snippet does not work for you, you can use the following code snippet.

// Change the Number of WooCommerce Products Displayed Per Pageadd_filter( 'loop_shop_per_page', create_function( '$products', 'return 16;' ), 30 );

In the above code snippets, you can replace the value 16 with the desired number of products.

Remember to Update files to save your changes.

Change the number of columns per page

Although the code snippets above can help you change the number of products, the default WooCommerce number of columns will be not changed on the shop page. If you wish to edit the number of columns, you can include the below code snippet in the functions.php file.

// Change the Number of Columns Displayed Per Page
add_filter( 'loop_shop_columns', 'lw_loop_shop_columns' );function lw_loop_shop_columns( $columns ) { $columns = 4; return $columns;}

You can replace the number 4 with another value as you want.

Conclusion

There are many benefits of changing the number of products per page on your WooCommerce shop pages. Depending on the type of products you are selling, it could make your shop layout more beautiful, increase product visibility, enhance the shopping experience, and optimize the purchasing process.

Woostify is a powerful theme that not only allows you to change the WooCommerce number of products per page, change the number of products per row, but also lets you customize other factors such as the shop layout, products’ photos, and more, to make your shop perform well on all devices with ease.

Hopefully, this tutorial will help you change your shop page’s layout as you wish without any hassles. If you have any further questions or recommendation, please let us know by leaving a comment below.