Products per row

alexanderkryger · February 2017

How do i change the amount of products per row.

I want to show 4 products on desktop and 1 on tablet/mobile.

http://hoejholthudpleje.dk/produkt-kategori/exuviance/dagscremer/

I have already tried this custom css

.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;
    }
}

It works fine on desktop, but messy op my mobile and tablet version.

Thanks you very much

Albert · February 2017

Hi,

there is no need to use custom css to display 4 products per row because such option already exists and you can find it under Theme options > Blog, Portfolio & Shop > Shop section. But the products always show 1 per row on mobile by default.

Elhusseintalaea · December 2019

hello, this option no longer exists in the same place. can you please explain where I can find it ?

thanks

Pablo · December 2019

Hello,

Yes, it is - you have to select the Layout with Grid.

http://prntscr.com/q6k37s

Thanks

Elhusseintalaea · December 2019

Hello Pablo,

it doest make any changes when i change the grid options. can you please have a look? Thanks a lot

https://www.molyrose.com/shop/

Pablo · December 2019

As I see, you are using a lot of plugins (including unsupported).

Please disable all of the plugins, clear the cache and turn on only the basic WooCommerce plugin.

Then test if the same happen.

Thanks

Products per row

Comments