In WooCommerce, the default number of products displayed per row on your shop and category pages may not always fit your brand’s style or your customers' needs. Adjusting the number of products per row can help create a more appealing layout, improving user experience and potentially boosting conversion rates. In this guide, we’ll go over how to easily change the products-per-row setting and explore some customization tips to make your shop pages stand out.
Why Change the Number of Products Per Row?
The layout of your shop page has a major influence on how customers navigate your site. Changing the number of products per row can:
Improve Readability: Fewer products per row can make each item more noticeable and avoid overwhelming customers.
Optimize for Different Screen Sizes: A flexible, responsive layout works better on mobile devices where smaller screens can benefit from fewer products per row.
Highlight Certain Products: Adjusting the row count gives you control over how much space each product takes up, which can be useful for highlighting certain items or categories.
Methods to Customize WooCommerce Products Per Row
You have several ways to change the products-per-row setting in WooCommerce, ranging from quick plugin solutions to code-based customizations. Let’s look at each option.
1. Using Theme Settings
Many WooCommerce-compatible themes come with built-in settings to change the number of products per row. Here’s how to check if your theme supports this feature:
In your WordPress dashboard, go to Appearance > Customize.
Look for WooCommerce > Product Catalog or Layout settings.
If your theme includes this option, you’ll see fields to adjust the number of products displayed per row on shop and category pages.
Simply adjust these numbers and save your changes. This is the easiest method if your theme supports it.
2. Adjusting with Code Snippets
If your theme doesn’t provide an option to change the products per row, you can use a custom code snippet. Add the following code to your theme’s functions.php file:
php
Copy code
// Change number of products per row to 4
add_filter('loop_shop_columns', 'custom_products_per_row');
function custom_products_per_row() {
return 4; // Change this number to your desired amount
}
Instructions:
Step 1: Go to Appearance > Theme Editor.
Step 2: Open the functions.php file of your theme.
Step 3: Copy and paste the code snippet above, adjusting the number as needed.
Step 4: Save your changes.
This code modifies the product columns layout on your shop page and category pages. For example, changing the return value to 3 will display three products per row.
Note: Editing functions.php can affect your site if not done correctly, so consider using a child theme to make code changes safer and easier to manage.
3. Using a Plugin for Easy Control
If you’re not comfortable editing code, there are plugins available that allow you to change the number of products per row without technical adjustments.
WooCommerce Product Archive Customiser: This plugin allows you to customize the number of products per row as well as rows per page.
ShopCustomizer: A versatile plugin that offers product layout control, including the option to change the number of products per row.
These plugins often offer additional customization settings for layout, fonts, and design, which can give you greater control over the look of your shop pages.
4. Customizing with CSS
If you’re looking to achieve a unique layout, custom CSS can give you more control over the product display. Here’s an example of a CSS code snippet to set up a 3-product-per-row layout on your shop page:
css
Copy code
.woocommerce ul.products li.product {
width: 30%; /* Adjust percentage based on desired number per row */
margin-right: 5%; /* Space between products */
}
.woocommerce ul.products li.product:nth-child(3n+1) {
clear: both; /* Start a new row every 3 products */
}
Instructions:
Step 1: Go to Appearance > Customize and select Additional CSS.
Step 2: Paste the CSS snippet and adjust values as necessary.
Step 3: Save and check your shop page for updates.
This CSS-based approach can help you achieve more unique layouts, but keep in mind that the specific values (like 30%) should be adjusted based on the look you’re aiming for.
Optimizing Product Layout for Different Devices
To create a responsive design, you may want to show a different number of products per row based on screen size. With CSS media queries, you can set the number of products per row to adjust for desktop, tablet, and mobile devices.
Here’s an example:
css
Copy code
/* Desktop: 4 products per row */
@media (min-width: 992px) {
.woocommerce ul.products li.product {
width: 22%;
margin-right: 3%;
}
}
/* Tablet: 2 products per row */
@media (min-width: 768px) and (max-width: 991px) {
.woocommerce ul.products li.product {
width: 45%;
margin-right: 5%;
}
}
/* Mobile: 1 product per row */
@media (max-width: 767px) {
.woocommerce ul.products li.product {
width: 100%;
margin-right: 0;
}
}
This code adjusts the layout based on screen size, creating a flexible display that improves the mobile shopping experience.
Testing and Refining Your Layout
After making changes to your product display layout, it’s essential to test the appearance on different devices and screen sizes. Here are some tips:
Preview on Desktop and Mobile: Use Chrome’s Developer Tools (F12) to view how your shop page looks on various screen sizes.
Check User Experience: Make sure that the layout is easy to navigate, with clear product images and visible text.
Adjust as Needed: Experiment with different row settings, especially if your products have unique design elements or detailed descriptions.
Wrapping Up
Customizing the number of products per row in WooCommerce gives you greater control over your store’s design, enhancing both aesthetics and usability. Whether you choose a plugin for simplicity, CSS for flexibility, or code snippets for direct control, tailoring your product display can create a more engaging shopping experience that aligns with your brand’s style.
By fine-tuning the layout, you can ensure that each product receives the attention it deserves, guiding customers toward purchases and helping you achieve better results from your WooCommerce store.
Comments 0