Ask your WordPress questions! Pay money and get answers fast! (more info)

WooCommerce- Change number of products per row WordPress



I am trying to change my woo commerce to show only 2 columns of products in the shop page.
I know i can accomplish this by adding the following code to my theme's child function.php file.(found at
// 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);

However i have two issues i need to solve...

First: I want to make this responsive. I would like the page to show 2 columns, unless the max width of the page is the size of an iphone 5 (320 px). In that case i would like it to be dropped to 1 column.

I am almost certain this can be done with some simple PHP if statement, however this is a bit advanced for me. :(

Second: I would like for the products to be centered in the shop page. If i do not alter the css after changing to two columns then i get this."

it is only when i change the following css to
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 48.45% !important;
margin-right: 2% !important;
margin-bottom: 2%;

a width to: 48.45% that i get the products centered.
It looks like this."
However i would like to make the products a bit smaller (around 40% and still have them: a) responsive, b) centered.

The products would look similar to this size at 40%

Answers (1)


timDesain Nanang answers:

Hi Sir, no need a hook to change the layout.
please disable or remove this hook:

function loop_columns() {
return 2; // 2 products per row
add_filter('loop_shop_columns', 'loop_columns', 999);

and delete your css before.

then, try put this style into theme's style.css:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin: 0 2% 20px 2% !important;
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img{display:block;max-width:90% !important;margin:0 auto 15px auto !important;}
.woocommerce .products .star-rating, .woocommerce-page .products .star-rating{margin:5px auto !important;}

@media (min-width:321px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 46% !important;}
@media (max-width:320px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 96% !important;}

timDesain Nanang comments:

The screenshot: