WooCommerce is a great plugin that adds flexible and robust ecommerce functionality to your website. However, it can require a bit of tinkering to get it looking and functioning exactly how you like it. You can make a huge range of changes from within the WooCommerce settings, but one thing that you won’t be able to change via the settings is the number of products in a row – unless you know what to do, you’ll be stuck with the standard row of four.
Luckily, there is a pretty quick fix, and you don’t really need to know much code in order to do it. Firstly, you need to add a snippet of PHP code to your functions.php file:
// Change number of products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 3; // 3 products per row
}
}
That will then show just three products in a row – if you want to use a different number, just change “return 3” to “return 6” or however many products you require.
You should now have the correct number of products set. However, they won’t be spaced out properly, as the CSS for WooCommerce is set to fit each product into roughly 1/4 the width of the page content by default. Now that we have three products in a row, we need to change this so the product width is expanded to fill roughly a third of the content width. Again, if you are showing a different number of products you will need to adjust this accordingly to show 1/6 width etc. The only thing you need to be aware of is that each product will have some margin applied via CSS, so you actually need to use values just under the required size. For example:
1/3 width: 30%
1/4 width: 22%
1/5 width: 16%
1/6 width: 13%
These may change slightly depending on your theme set up, so feel free to tweak these values until your products line up correctly. The CSS classes that control this are as follows:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product
We’re going from 1/4 width to 1/3 width, so all we need to do is set this to 30% rather than 22.05%.
So just add the following line to your CSS file:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 30% !important;
}
Once you’ve added this, the products should all line up in a row correctly. Remember though, if you’re using a third-party theme it’s always best practice to set up a child theme and amend that, rather than change the code of the parent theme. If you want to set up a child theme, we have a tutorial here (coming soon).
Now the only thing you may need to do is adjust the font size or line heights to ensure that everything shows up in a neat line, rather than having your ‘Add to Basket’ button, for example, showing at different positions under each product. Fortunately, we have a tutorial for that too! Check it out here (coming soon).
