# Two Products per Row on Phones

> Shows shop and category pages in two columns on phones instead of one long single column, so shoppers see more products without scrolling.

- Type: CSS
- Runs: Site-wide header
- Category: [WooCommerce](https://wpide.com/library/category/woocommerce/)
- Requires: WooCommerce
- Tags: woocommerce, css, mobile, catalog
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/woo-two-columns-on-phones/

## Code

```css
@media (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 48%;
    float: left;
    clear: none;
    margin: 0 4% 1.5em 0;
  }
  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
  .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
    margin-right: 0;
  }
  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n+1),
  .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n+1) {
    clear: both;
  }
  .woocommerce ul.products li.product .button {
    padding: .6em .8em;
    font-size: .85em;
  }
}
```

## Notes

For classic WooCommerce templates; block themes set columns in the Product Collection block settings.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Two Products per Row on Phones" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/