WooCommerce: Showing More (or Fewer) Products per Category Page – A Beginner’s Guide
Ever browsed your WooCommerce store, clicked on a category, and thought, “Hmm, I wish there were more [or fewer] products showing here?” You’re not alone! By default, WooCommerce displays a set number of products on category pages. Usually, it defaults to 8 or 12 products. This article walks you through how to change the number of products displayed per category page in WooCommerce.
Why change the default number?
* Improved User Experience: A small number can lead to excessive page hopping. Imagine a shoe store with only *two* pairs of shoes per category page. Frustrating, right? More products per page reduces clicks and helps customers find what they’re looking for faster.
* Better Visual Appeal: Depending on your design, having too few products can make the category page look sparse. Conversely, too many products without proper layout can overwhelm visitors. Think of it like arranging a display in a shop window – you want a good balance.
* SEO Benefits: While *directly* affecting SEO is debatable, a better user experience (faster page load, easier navigation) *indirectly* improves your SEO. People stay longer, browse more, and your bounce rate decreases.
* Mobile Optimization: Large grids of products can become visually unappealing and slow to load on mobile devices. Consider showing fewer products to improve load times and the mobile experience.
Method 1: Using the WooCommerce Customizer (Easiest!)
The easiest and safest method is using the built-in WooCommerce Customizer settings. This requires *no coding*.
1. Navigate to the WordPress Customizer: In your WordPress admin dashboard, go to Appearance > Customize.
2. Find WooCommerce: In the Customizer menu, look for WooCommerce.
3. Go to Product Catalog: Click on Product Catalog.
4. Adjust ‘Products per row’ and ‘Rows per page’: Here’s where the magic happens!
- Products per row: This determines how many products are displayed across each row on your category pages.
- Rows per page: This determines how many rows of products are displayed before requiring the user to paginate to the next page.
- Option 1 (Theme Editor – Not recommended for beginners): In your WordPress admin dashboard, go to Appearance > Theme File Editor (or Theme Editor). Find the `functions.php` file in the list of files on the right. Avoid this if you are not comfortable editing code directly.
- Option 2 (FTP/File Manager): Connect to your website using an FTP client (like FileZilla) or your hosting provider’s file manager. Navigate to your theme’s directory (usually `/wp-content/themes/your-theme-name/`) and find the `functions.php` file. If you’re using a child theme, you’ll find it in `/wp-content/themes/your-child-theme-name/`.
Example: If you set “Products per row” to 4 and “Rows per page” to 3, you will have 4 x 3 = 12 products displayed per category page.
5. Publish Your Changes: Don’t forget to click the Publish button at the top of the Customizer to save your changes.
Reasoning: The Read more about How To Change Shop Page Layout In Woocommerce Customizer provides a visual and user-friendly way to make these changes without directly editing any code. This is ideal for beginners.
Method 2: Using the `functions.php` File (Advanced)
This method involves adding a code snippet to your theme’s `functions.php` file (or a child theme’s `functions.php`). Be very careful when editing this file, as mistakes can break your website. Always back up your site before making any code changes. Using a child theme is highly recommended, so that your changes are not overwritten by theme updates.
1. Access Your `functions.php` File:
2. Add the Code Snippet: Add the following code to the end of your `functions.php` file:
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 set in WooCommerce > Settings > Products > Display
// Return the number of products you wanna show per page.
$cols = 12; // Change this number to the desired number of products per page
return $cols;
}
Explanation:
- `add_filter( ‘loop_shop_per_page’, ‘new_loop_shop_per_page’, 20 );`: This line hooks into the `loop_shop_per_page` filter, which controls the number of products displayed in the WooCommerce loop (e.g., on category pages).
- `function new_loop_shop_per_page( $cols ) { … }`: This defines a new function called `new_loop_shop_per_page`. The `$cols` variable contains the existing value, which we’re going to override.
- `$cols = 12;`: This is the key line! Change `12` to the number of products you want to display per category page.
- `return $cols;`: This line returns the new value, which WooCommerce will use.
3. Save the `functions.php` File: Save the changes to your `functions.php` file.
4. Clear Your Cache: If you’re using a caching plugin, clear your cache to ensure the changes are reflected on your website.
Example: If you want to display 16 products per category page, change `$cols = 12;` to `$cols = 16;`.
Reasoning: This method provides more control for advanced users who prefer to customize their WooCommerce store through code. It allows for more granular control and integration with other custom functionalities.
Method Check out this post: How To Put 0 In Woocommerce Options 3: Using a Plugin
If you’re not comfortable with either of the above methods, there are several plugins available that can help you change Check out this post: How To Edit Product Category Page Woocommerce the number of products displayed per page. Search the WordPress plugin repository for terms like “WooCommerce product per page” or “WooCommerce grid customization”. Examples include:
* WooCommerce Category Layout
Reasoning: Plugins provide a user-friendly interface for making these changes without requiring any coding knowledge. They often offer additional customization options as well.
Important Considerations:
* Pagination: Make sure your theme and WooCommerce are configured to display pagination (the page numbers at the bottom of the category pages). Without pagination, users won’t be able to see all the products if you’re displaying a large number per page.
* Performance: Displaying a large number of products per page can slow down your website, especially if you have many high-resolution images. Consider optimizing your images and using a caching plugin to improve performance.
* Mobile Responsiveness: Test your category pages on mobile devices to ensure that the layout and number of products displayed are appropriate for smaller screens.
Conclusion:
Changing the number of products displayed per category page in WooCommerce is a simple yet effective way to improve the user experience and visual appeal of your online store. Choose the method that best suits your technical skills and needs. Happy selling!
