This is How to Set the Correct Number of Items per Row in WooCommerce Archive Pages
As an e-commerce store owner using WooCommerce, one of the key design considerations is how to display your products in an organized and visually appealing way on your archive pages (such as the main shop page, category pages, and search results).
The default WooCommerce product layout is to display items in a grid, with a certain number of products per row. However, many store owners struggle to get this layout set up correctly, often relying on outdated CSS rules that can lead to inconsistent or broken designs.
In this article, we'll dive into the right way to control the number of items per row on your WooCommerce archive pages, without resorting to problematic CSS hacks. By the end, you'll have a solid understanding of the proper methods to achieve a consistent, responsive product layout that delivers the best possible shopping experience for your customers.
The Problem with Outdated CSS Hacks
Traditionally, store owners have tried to control the product grid layout by applying custom CSS to the default WooCommerce markup. A common approach was to target the <li>
elements that represent each product, and apply "first" and "last" classes to the odd and even items respectively.
The logic behind this was to then use CSS selectors to apply specific styles to the "first" and "last" elements in each row, in order to achieve a consistent grid layout.
For example, the CSS might look something like this:
.woocommerce ul.products {
display: flex;
flex-direction: row;
}
.woocommerce ul.products li.product {
flex-grow: 1;
}
.woocommerce ul.products li.product:nth-child(odd) {
margin-right: 20px;
}
.woocommerce ul.products li.product:nth-child(even) {
margin-left: 20px;
}
While this approach may have worked in the past, it's now considered an outdated and problematic way to control the product layout. Here's why:
-
Inflexible and Prone to Breakage: Relying on specific CSS selectors like :nth-child(odd)
and :nth-child(even)
makes the layout extremely fragile and prone to breaking. Any changes to the number of products displayed per row, or the addition/removal of products, can cause the whole grid to fall apart.
-
Lack of Responsiveness: The "first" and "last" class approach doesn't handle responsive design well. As the screen size changes, the layout may become inconsistent or even broken, leaving your customers with a poor user experience.
-
Potential Performance Issues: Applying complex CSS selectors and custom styles can negatively impact the performance of your WooCommerce site, particularly on pages with a large number of products.
The Correct Way to Set the Number of Items per Row
Instead of relying on outdated CSS hacks, the recommended way to control the number of products displayed per row on your WooCommerce archive pages is to use the built-in WooCommerce functions and settings.
Here's how you can do it:
- Disable the Flex Layout: The first step is to override the default WooCommerce CSS that applies a flex-based layout to the product grid. You can do this by adding the following CSS rule to your theme's stylesheet (or a child theme's stylesheet):
.woocommerce ul.products {
display: block !important;
}
This will revert the product grid to a standard block-based layout, which is easier to control.
-
Set the Number of Columns: Next, you need to configure the number of columns (i.e., the number of products per row) that you want to display on your WooCommerce archive pages. There are a few ways to do this:
a. Use the WooCommerce Settings: In the WooCommerce settings, navigate to "Products" > "Display" and look for the "Products per row" setting. Here, you can specify the number of columns you want to use.
b. Use a Code Snippet: Alternatively, you can add the following code snippet to your theme's functions.php
file to set the number of columns:
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 3; // Set the number of columns here (e.g., 3 for 3 columns)
}
}
This code snippet adds a filter to the loop_shop_columns
hook, which allows you to control the number of columns displayed on your WooCommerce archive pages. You can adjust the return value (3 in the example) to set the desired number of columns.
-
Ensure Responsive Design: To ensure your product grid remains responsive and visually appealing on different screen sizes, you may need to add some additional CSS. For example, to make the products display in 2 columns on smaller screens (below 480px), you can add the following CSS to your theme's stylesheet:
@media (max-width: 480px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: left !important;
width: 48.05% !important;
}
}
This CSS rule will override the default layout and force the products to display in 2 columns on smaller screens, providing a consistent and responsive design.
By following these steps, you can effectively control the number of products displayed per row on your WooCommerce archive pages, without relying on outdated CSS hacks. This approach ensures a consistent, responsive layout that delivers the best possible shopping experience for your customers.
Remember, the key is to use the built-in WooCommerce functions and settings to manage the product grid, rather than trying to manipulate the layout through custom CSS. This will make your store more robust, maintainable, and adaptable to future changes.
If you're looking for a way to further optimize your WooCommerce store's performance and user experience, consider using a tool like Flowpoint.ai. Flowpoint can help you identify and fix technical issues, optimize your site's design and content, and generate AI-powered recommendations to boost your conversion rates
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.