Return to previous page

How do I make the grid display 4 products instead of 5 on mobile?

This topic has 7 replies, 3 voices, and was last updated 1 days, 15 hours ago ago by Luca Rossi

Goostaf

Participant

September 18, 2024 at 09:52

Hello, we are doing a grid display of 5 in a row and a load more button, can we make it so that on mobile it initially displays 4 products only to make it look nice

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#414855 Copied Theme version: 9.3.3

6 Answers

Rose Tyler

Support staff

September 18, 2024 at 12:45

Hello, Goostaf,

Thank you for reaching out to us with your request.

There is no such option, unfortunately.

Best Regards,
8Theme’s Team

#414882 Copied

Goostaf

Participant

September 18, 2024 at 12:47

I remember exactly that you had a theme with a solution for me, I can’t find it, there was a css code that hid the fifth product on a mobile device just

#414884 Copied

Goostaf

Participant

September 18, 2024 at 13:08

there was a style that hid 1 product on the mobile and only 4 were shown

#414892 Copied
Luca Rossi

Support staff

September 18, 2024 at 17:17
Hi @Goostaf,

Can you try with this custom CSS codes?
```
.etheme_products .products-loop > div:nth-child(5n+1) {
    display: none;
}
```
Hope it helps!
#414946 Copied
Goostaf

Participant

September 18, 2024 at 17:24

Yes, what is needed, the question is, is it possible to make 6 displayed on the mobile through the code as well? On PC 5, on mobile 6

#414948 Copied

Luca Rossi

Support staff

September 19, 2024 at 04:26

Dear Goostaf,

We hope this message finds you well. We’re writing to assist you with the WPBakery Builder’s Products element. To set the product limit to 6, please follow the instructions provided in the screenshot linked below:

[https://prnt.sc/5FDnUvrBUiR8](https://prnt.sc/5FDnUvrBUiR8)

Should you require any further assistance, please do not hesitate to contact us.

Best regards,
The 8Theme Team

#414965 Copied
Tagged: mobile display settings, mobile woocommerce configuration, product display customization, product grid adjustment, woocommerce templates, wordpress woocommerce
Viewing 7 results - 1 through 7 (of 7 total)