Skip to content

Instantly share code, notes, and snippets.

@jameskoster
Created January 12, 2012 16:58
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jameskoster/1601658 to your computer and use it in GitHub Desktop.
Save jameskoster/1601658 to your computer and use it in GitHub Desktop.
WooCommerce - Change number of products per row
// Change number or 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
}
}
@Sakshin
Copy link

Sakshin commented May 6, 2012

When i paste this into the functions.php in the assigned area i get a lot of errors. I want to change the number to 4. Wassup?

@sducasse
Copy link

This does not work for me. I have WooCommerce version 1.6.3.
I do not get any error. I put it in my function.php in my Wootique Theme!

Any idea why this function does'nt work on my website?

@sducasse
Copy link

Ok I just found that it works on category page but not on page when you put this shortcode : [product_category category="category-name"]

@prettina
Copy link

Hi,

I am unable to change the number of products per row using that code.I am using sommerce shop theme.
The items appear 4 in a row in 1st row then 1 on 2nd row , again 4 items on 3rd row and 1 on 4th ....
It looks awkward.However when i use a sidebar that code works , but i don't want a sidebar on my shop page.
Please help.

@prositeplease
Copy link

@muddasirawan
Copy link

muddasirawan commented Jan 4, 2018

it helps for me reference link
@media screen and (min-width:1024px) {
.woocommerce ul.products li.product {
width: 21% !important;
margin: 2% !important;
clear: none !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) {
clear: both !important;
}
}

@media screen and (min-width: 768px) and (max-width: 980px) {
.woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last {
clear: right !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) {
clear: none !important;
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment