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

Hi @kharisblank
Still not work after I purging all cache.

Hi,

Thank you for getting back.

Please keep that CSS code remains there. Then add the below PHP snippets to your child theme’s functions.

    add_filter('loop_shop_columns', 'sydney_pro_child_product_loop_columns');
    if (!function_exists('sydney_pro_child_product_loop_columns')) {
    	function sydney_pro_child_product_loop_columns() {
    		return 4; // 4 products per row
    	}
    }

Or you can use the Code Snippets plugin to add snippets without needing a child theme.

Regards,
Kharis
aThemes Support

Hi @kharisblank
I have added the code via Code Snippets plugin.
But it still does not work.
BTW, the theme which I used is child theme, does it matter?

Now, I added the CSS code in Sydney child theme ( Appearance > Customize > Additional CSS)
And add PHP snippets by the Code Snippets plugin.
But it still shows 1 product per row in mobile

Hi,

Thank you for getting back.

As checked from your website’s source code, you have cache that should be flushed from your website’s admin. Otherwise, the web browser will still load the cached version of your pages. You may also need to clear the web browser’s cache, history, and restart it.

Regards,
Kharis
aThemes Support