Archived topic
How to set up number of products on WC Shop Page?
7 replies · Started by Dmitry Bychenko on July 16, 2016
Hi, guys,
i've got a problem to change default number of products on WooCommerce's Shop Page. (by default it is 4)
I've tried 4 or 5 plugins, and finally i found something usefull on this forum.
Link to this page:
https://docs.woothemes.com/document/change-number-of-products-per-row/
It offers 3 solutions:
// 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
}
}
this solution looks this way on my site:
pic 1
which is not what i want.
second solution does the same.
and third solution does exactly what i want, but looks this way:
pic 2
Only Alt-descriptions (or whatever it is) are being shown.
thats the settings of this plugin:
pic 3
i didnt change anything, it's standard settings.
Whats wrong, how to make this plugin working well?
Or how to make code working well
Hi Dmitry,
Did you want to change number of products per row? That's what the codes/plugin above seem to do. Myself i use this, might be similar to what you have but it works for me
/* ===Override theme default specification for product # per row===*/
function loop_columns() {
return 2; // 2 products per row
}
add_filter('loop_shop_columns', 'loop_columns', 999);If you instead wanted to change number of products shown on the shop page, i use the code below. You would want to change "return 10" to what suits you best.
/*===Change number of products displayed on category page to 10*/
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 10;' ), 20 );https://docs.woothemes.com/document/change-number-of-products-displayed-per-page/
Along with the code Jamal pointed out, you could add this CSS:
@media(min-width:769px){
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 30%;
margin: 0 3% 2.992em 0;
}
}Together, they should do what you're looking for I believe :)
thanks for help, Tom, but still doesnt work properly
it looks ok on desktop
but thats how it looks on mobile:
how it looks on mobile
***
WooCommerce Product Archive Customiser plugin places products well on mobile, one below another, but doesnt show picture, title, price... shows only alt-description.
I just adjusted the CSS above so it should only apply on desktop :)
thanks, Tom and Jamal,
its working.
my mistake was to put this
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 3;
}
}into Simple PHP. the right way is to put it into functions.php
Awesome, glad it's working :)