How to change number of products per row(on mobile phone)

How can I change the number of product per row, especially view on mobile phone?

Hello there,

Thank you for reaching out to us. I am happy to help with your queries.

Can you share a link to your products section you want to change the column number? It seems likely we can use extra CSS code to do that. But I need to do direct inspection first.

Regards,
Kharis
aThemes Support

Hi @kharisblank

Hello there,

Thank you for sharing the link.

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 769px) {
      .woocommerce .content-area ul.products li.product, 
      .woocommerce-page .content-area ul.products li.product {
        width: 21.9%;
      }
    }

    @media only screen and (max-width: 768px) {

      .woocommerce ul.products[class*="columns-"] li.product, 
      .woocommerce-page ul.products[class*="columns-"] li.product {    
        width: 32%;
        clear: unset;
        margin-right: 0.3em;
      }
      .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n), 
      .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
        float: left;
      }
      
    }

I request you giving it a try and let me know how it woks for you.

Regards,
Kharis
aThemes Support

@kharisblank It does not work.
It still shows only ONE product per row on mobile phone.

@kharisblank Could you help?

Hi,

​Please accept my apologies for the delay in response. I really appreciate your patience.

As checked, your website has an active caching that probably is stopping the recent code addition to take action until you flush it. I request you re-applying the code and clearing the cache. Let me know your views.

Regards,
Kharis
aThemes Support