Woocommerce Product Catalogue Products per Row

Activello
1

Hello

On the Woocommerce catalogue page when I set the products to one per row, they still show as two on a mobile.

I have also added space between the products which does not show on a mobile. Can you help apply these to mobile view?

Thank you,
Lucy

3

Hi @lucydm,
Thanks for reaching out.
In this case, could you perhaps provide us with a link to your site so that we can check on this.
I look forward to your reply.
Best Regards,
Support.

4

Thank you: www.theloveplace.co.uk/shop

Please see attached screenshots.

I would be happy to have them two per row if I could align the Add to Basket Buttons.

5

hi

this code:

.woocommerce ul.products li.product {
margin-right: 10%;
}

from custom css must be removed and you will have 2 products in a row on shop page

6

Hi Noda

I want this code in my css to apply to mobile view.

Can you do that?

7

OR I will remove the code if you can give me css to make the Add to basket buttons align.

Thank you,
Lucy

8

Lucy sorry but not clearly understand, can you tell me the purpose of this code?

9

Hi Noda

The code is to create space between the products so they aren’t close together. Ignore the code.

What I want to know is, how do I make products appear one per row on a mobile?

If I set the products to show one per row it works on the desktop view but not on the mobile view.

My other separate question is how to make the Add to Basket buttons line up when the products are next to each other?

Thank you,
Lucy

10

HI

  1. You can use this css to show one product per row by using this css:

@media (max-width: 767px){
.woocommerce ul.products.columns-2 li.product, .woocommerce-page ul.products.columns-2 li.product {
width: 100%;
}
}

  1. baskets on the same level, - make sure you are using same size images for both products, otherwise, that’s not possible
11

Hi Noda

Thank you.

Another question: I have set my products to show three per row but without the code above they show two per row on a desktop. How can I make them show three?

Lucy

12

hi Lucy

From where you did this?
Cant see 3 products, you have to add third one,

13

Hi Noda

I do not have three items showing, only two but set at three per row to make the images smaller - please see screenshot. On the mobile it still just show two large items per row.

Thank you,
Lucy

14

Sorry but can’t get what you want to achieve, you set it to show 3 products and it shows 3 products,
is there anything in functionality that is not working?

15

Hi Noda

It shows three products per row on the desktop but only two per row on mobile. I want it to show three per row on mobile. Is this possible?

Thank you,
Lucy

16

Hello there,

In this case, you would need to add extensive CSS to change the layout on mobile. You would need to enlist the aid of a third party developer, one of which you can find here:
https://colorlib.com/out/envatostudio

Best Regards,
Support