Skip to main content

Change Archive Loop Default Layout Column Count

By default, the default WooCommerce product grid layout in the Product Loop module forces a 1 column layout on mobile. The below CSS will change this to be 2 columns. You can adjust the values "2" as required for your column count. You could also extend this for any screen size by adjusting the media query. Simply paste the below CSS in the Divi Theme Options and away you go!

/**
* Adjust the value 2 and 2fr according to the column count you need
**/
@media (max-width: 767px) {
.default-style ul.products {
grid-template-columns: repeat(2,minmax(10px,2fr))!important;
}
}