How to Display More Than 27 Products in WooCommerce: A Comprehensive Guide
Introduction:
WooCommerce is a powerful and flexible e-commerce platform, but sometimes its default settings can be limiting. One common frustration is the restriction on displaying only 27 products per page on category and shop pages. This can lead to a poor user experience, forcing customers to navigate through multiple pages to find what they’re looking for. This article will guide you through various methods to easily increase the number of products displayed per page in your WooCommerce store, improving navigation and potentially boosting sales. We’ll cover solutions ranging from simple WordPress settings adjustments to code-based customizations, allowing you to choose the best approach for your technical skill level.
Main Part: Displaying More Products Per Page
There are several ways to overcome the 27-product limit in WooCommerce. Choose the method that best suits your comfort level with code and your specific needs.
1. Using the WordPress Admin Panel (Theme Customizer)
This is the easiest method, requiring no code modifications.
1. Navigate to Appearance > Customize in your WordPress dashboard.
2. Look for a section related to WooCommerce. It might be labeled “WooCommerce”, “Shop”, or “Products”. The specific label can vary based on your theme.
3. Within the WooCommerce section, search for a setting called “Products per page”, “Products displayed per row”, or something similar.
4. Enter the desired number of products you want to display per page. Consider the layout of your theme and the screen size of your users when choosing this number.
5. Save your changes by clicking the “Publish” button.
This method is ideal for those who prefer a no-code solution. However, it’s dependent on your theme’s support for this customization. If your theme doesn’t have this option, you’ll need to use one of the following methods.
2. Utilizing WooCommerce Settings
While it doesn’t directly control the *number* of products per page, you can influence it by changing the number of *columns*.
1. Go to WooCommerce > Settings > Products > Display.
2. Look for the “Default Category Display” and “Default Product Sorting” options. Changing the “Default Category Display” between “Show products”, “Show categories”, and “Show categories & products” can impact how many products are initially loaded.
3. Under the “Shop Pages” settings, adjust the “Products per row” option. This allows you to increase the number of products displayed horizontally. Increasing the number of products per row can indirectly allow for more products to be visible on the page without scrolling.
4. Save your changes.
This method, combined with the Theme Customizer method (if available), can sometimes provide enough control without resorting to code.
3. Editing the `functions.php` File (or Using a Code Snippets Plugin)
This method requires adding a small code snippet to your theme’s `functions.php` file or using a code snippets plugin. Always back up your website before editing the `functions.php` file. A code snippets plugin is a safer alternative as it keeps your customizations separate from your theme and protects them from being overwritten during theme updates.
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 on WooCommerce settings
// You can change the number of products per page that are displayed
// I’m displaying 48 products per page. Replace 48 with your desired value.
$cols = 48;
return $cols;
}
Here’s a breakdown of the code:
- `add_filter( ‘loop_shop_per_page’, ‘new_loop_shop_per_page’, 20 );`: This line adds a filter to the `loop_shop_per_page` filter hook. This hook allows you to modify the number of products displayed per page in the main shop loop. The `20` is the priority, determining when this filter is applied.
- `function new_loop_shop_per_page( $cols ) { … }`: This defines a new function that will handle the modification. The `$cols` parameter represents the current number of products per page.
- `$cols = 48;`: This line sets the new number of products per page to 48. Replace 48 with the number you want to display.
- `return $cols;`: This returns the modified number of products per page.
- Learn more about How To Set Product As Featured In Woocommerce
How to use a Code Snippets Plugin:
1. Install and activate a Code Snippets plugin Explore this article on How To Import Products From Amazon To Woocommerce (e.g., “Code Snippets”).
2. Go to “Snippets > Add New”.
3. Paste the code Learn more about Woocommerce How To Print Orders snippet into the code editor.
4. Give your snippet a descriptive name (e.g., “Change Products Per Page”).
5. Ensure the snippet is set to “Run snippet everywhere”.
6. Save and activate the snippet.
This method provides more control over the number of products displayed and is relatively easy to implement, especially with a code snippets plugin.
4. Modifying WooCommerce Template Files (Advanced)
This is the most advanced method and requires a good understanding of PHP and WooCommerce template structure. It’s highly recommended to create a child theme before modifying template files. Modifying the core template files directly can lead to issues during updates.
1. Create a child theme.
2. Copy the relevant template file to your child theme. The file you’ll likely need to modify is `woocommerce/templates/loop/loop-start.php`.
3. In your child theme’s copy of the template file, you’ll need to adjust the WooCommerce query to display more products. This usually involves modifying the `WP_Query` arguments.
Example (Conceptual – Requires deep understanding of WooCommerce internals and your theme):
// Inside your modified loop-start.php 'product', 'posts_per_page' => 60, // Set desired number 'paged' => get_query_var('paged') ? get_query_var('paged') : 1, );
$products = new WP_Query( $args );
if ( $products->have_posts() ) {
while ( $products->have_posts() ) {
$products->the_post();
// … (rest of your product loop code)
}
}
?>
Important Considerations When Choosing a Method:
- Theme Compatibility: Ensure the method you choose is compatible with your theme. Some themes have built-in options that override standard WooCommerce behavior.
- Website Performance: Displaying a large number of products per page can impact your website’s loading speed. Optimize images and consider using caching plugins to mitigate this.
- Mobile Responsiveness: Make sure your theme handles the increased number of products well on smaller screens.
- User Experience: Choose a number of products per page that provides a good balance between visibility and scrolling. Consider user testing to determine the optimal number for your target audience.
Conclusion:
Increasing the number of products displayed per page in your WooCommerce store can significantly improve the user experience and potentially increase sales. By following the methods outlined in this article, you can choose the solution that best suits your technical skills and website needs. Remember to test thoroughly after implementing any changes to ensure everything functions correctly and your site remains fast and responsive. Consider user feedback to fine-tune your product display for optimal results.
