Archived topic

Woo 3 products per row

7 replies · Started by MaksymPS on February 10, 2016

Viewing posts 1–8 of 8

February 10, 2016 at 7:24 am #171798

Hi Tom,

Is there any way to add 3 products in WooCommerce like here ?

I have found a code, but it doesn;t work well.

// 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
	}
}

http://piccy.info/view3/9390099/1865370692a14ee65b957aa8492706ff/orig/

Thanks Tom!

Best regards

February 10, 2016 at 11:33 am #171859

That should do it - any chance you can link me to that page?

February 10, 2016 at 1:14 pm #171898

Tom,

Here it is: http://vetlikar.com/shop/

February 10, 2016 at 10:06 pm #171965

Hmm, not sure why their code isn't working.

You can do it with some CSS as well:

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    float: left;
    margin: 0 3% 2.992em 0;
    width: 30%;
}

February 10, 2016 at 11:38 pm #171982

Tom,

Wow! It works perfectly. Thanks a lot, Tom :)

P.S. can you help, please, with WooCommerce product images from mobile version?
It looks like this now:
http://piccy.info/view3/9392511/587c39c77bba476af516a87c96fba052/orig/

1. How to make them bigger?
(Like here)
2. How to fix text appears?

Thanks :)

February 11, 2016 at 8:32 am #172086

Looks like you want to do something like this:

@media (max-width: 768px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        width: 100%;
        margin-right: 0;
    }
}

February 12, 2016 at 12:20 am #172230

Tom,

Perfect!
Thank you very much! :)

February 12, 2016 at 8:52 am #172311

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.