Home > Tips & Tricks > Number of WooCommerce Products Displayed per Page

Number of WooCommerce Products Displayed per Page

By default, WooCommerce displays a set number of products per page on the shop page. Which may not be adjustable with your theme.

So, at this point, you might want to customize this number of products per page based on your specific requirements, such as the layout of your shop or the browsing experience you want to offer to your customers.

Also Read: WooCommerce Action Hooks: Shop / Archive / Category Pages

Let’s see the examples to demonstrate how you can customize the number of WooCommerce products displayed per page.

Example 1: Display 24 Products per Page

Add the following code to your theme’s functions.php file to change the number of WooCommerce products displayed per page. I recommend using a child theme for customization.

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

function custom_products_per_page( $cols ) {
    return 24; // Change this number to your desired number of products per page
}

In this example, we’re using the loop_shop_per_page filter to modify the number of products displayed per page. We define a custom function custom_products_per_page that returns the desired number of products per page. In this case, we’re setting it to 24. You can change this number to any value you prefer.

Also Read: How to Change Default Product Sorting in WooCommerce?

Example 2: Display 10 Products per Page

Add the following code to your theme’s functions.php file to set the display product per page limit to 10.

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

function custom_products_per_page( $cols ) {
    return 10; // Change this number to your desired number of products per page
}
More Tricks

FAQs

How do I change the number of products displayed per page on my WooCommerce shop page?

You can customize the number of products per page by adding code to your theme’s functions.php file using the loop_shop_per_page filter. Simply define a custom function that returns the desired number of products per page.

Can I set different numbers of products per page for different sections of my shop?

Yes, you can set different numbers of products per page based on your requirements. By modifying the custom_products_per_page function in the code snippet, you can specify different numbers for different sections of your shop, providing a tailored browsing experience.

Will changing the number of products per page affect my site’s performance?

While increasing the number of products per page may lead to longer page load times, it generally shouldn’t significantly impact performance. However, it’s essential to consider factors such as server resources and user experience when determining the optimal number of products to display per page.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment