WooCommerce- Change number of products per row WordPress

• SOLVED

Hello,

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 http://docs.woothemes.com/document/change-number-of-products-per-row/
// 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.
https://www.dropbox.com/s/kfch9zdtqciokw6/Screenshot%202014-09-30%2021.34.37.png?dl=0"

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.
https://www.dropbox.com/s/aojap8p40cf6sql/Screenshot%202014-09-30%2022.08.52.png?dl=0"
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%
https://www.dropbox.com/s/aojap8p40cf6sql/Screenshot%202014-09-30%2022.08.52.png?dl=0

Answers (1)

2014-10-01

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;
text-align:center;
}
.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: