Return to previous page

Display 3 products per row in product page

This topic has 10 replies, 2 voices, and was last updated 4 years, 10 months ago ago by Rose Tyler

denchauskas

Participant

February 23, 2020 at 21:49

How to display 3 products in row on products page instead of 1?

#230177 Copied Theme version: 6 WooCommerce version: Newest

9 Answers

Rose Tyler

Support staff

February 24, 2020 at 13:19

Hello,

Customize > WooCommerce > Product Catalog > Products per row.
If this is not what you are looking for, describe the request in more detail.

Regards

#230205 Copied

denchauskas

Participant

February 24, 2020 at 14:46

Yeah, sorry, forget to say about screen.
I need to change products per row on Mobile screens

#230217 Copied

Rose Tyler

Support staff

February 25, 2020 at 12:16

Hello,

Please provide URL of your shop page.

Regards

#230254 Copied

denchauskas

Participant

February 25, 2020 at 17:22

Website is still in developing, but i added some products just for example

Please contact administrator
for this information.

#230312 Copied
Rose Tyler

Support staff

February 26, 2020 at 08:24
Hello,

Try to add the next code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.products-loop .product {
    width: 33.33% !important;
}
.products-loop .product:nth-child(2n+1) {
    clear: none !important;
}
.products-loop .product:nth-child(3n+1) {
    clear: both !important;
}
```
Regards
#230328 Copied
denchauskas

Participant

February 26, 2020 at 11:31

Works like a charm, thanks! Turned it off on categories page, cause it broke that page.
How I can make them display in a row too?

Please contact administrator
for this information.

#230347 Copied
Rose Tyler

Support staff

February 26, 2020 at 13:20
Please try this code:
```
.products-loop .product-category {
    width: 33.33% !important;
    display: inline-block;
    min-height: 180px;
    margin-bottom: 0 !important;
}
.products-loop .categories-mask h4 {
    font-size: 16px;
}
.products-loop .categories-mask span, .categories-mask span.more {
    font-size: 10px;
}
.products-loop .categories-mask {
    padding: 10px;
}
```
Regards
#230359 Copied
denchauskas

Participant

February 26, 2020 at 13:34

Now it`s working perfectly, thanks!

#230363 Copied

Rose Tyler

Support staff

February 26, 2020 at 13:46

You’re welcome!

Regards

#230366 Copied
Viewing 10 results - 1 through 10 (of 10 total)