Customize Store for mobile

Hi there!

I understand that you want to show 2 columns of products on large screens and 1 column of products on mobile devices.

WooCommerce itself doesn’t come with such settings but you can use CSS to control the width of the columns and show it differently on different mobile devices.

In your site, you will use something similar to this in Appearance > Customize > Additional CSS field:

@media only screen and (max-width: 600px) {
      .woocommerce ul.products.columns-2 li.product {
           width: 100%;
        }
}

You can learn more about responsive design and media queries here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

It will be a good idea to get in touch with your theme developer to see if they have any existing settings available in the theme to control this.

Thank you ??

Hello!

Thank you so much for your tips. I have tried the code and it works perfectly for mobile phones now. I so much appreciate your help.

Now, I hope this is not too much asking but could you possibly provide this code for tablets? It does not work on tablets.

Thanks a lot again!

Liliana

• This reply was modified 2 years ago by aflorarte.

Hi there!

Thank you so much for your tips. I have tried the code and it works perfectly for mobile phones now. I so much appreciate your help.

That’s great to read! Thank you for the kind words.

Now, I hope this is not too much asking but could you possibly provide this code for tablets? It does not work on tablets.

I understand that you’d like to display one product per row, when the site is viewed on tablets also. The key here is to set up the necessary break points, as they are called. Therefore, the CSS snippet should be added again, below the previous one, only this time the first line should read as follows:
@media only screen and (max-width: 768px) {

Thank you ??

Hello Pepe and thank you so much for your help.

Unfortunately, I may have done something wrong this time because the mobile code is working fine, the new new one for tablets is not working. Tablets are still displaying 2 products per row. Please let me share with you the exact code as I understood it:

@media only screen and (max-width: 600px) {
      .woocommerce ul.products.columns-2 li.product {
           width: 100%;
        }
	@media only screen and (max-width: 768px) {
      .woocommerce ul.products.columns-2 li.product {
           width: 100%;
        }
}
}

I hope you can let me know what I am doing wrong.

Again, thank you in advance!

Liliana

• This reply was modified 2 years ago by aflorarte.

Hello @aflorarte,

Unfortunately, I may have done something wrong this time because the mobile code is working fine, the new new one for tablets is not working. Tablets are still displaying 2 products per row. Please let me share with you the exact code as I understood it:

No worries, please delete the whole code block and replace it with the following:

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

Also, I would like to explain what’s going on here so you know why it may not work. This part @media (max-width: 768px) basically checks if the width of the display is less than 768 pixels and only then applies the changes.

So if you’re checking from a tab that has a wide display, the changes won’t be applied.

You can increase the 768 to something like 840 for testing purposes just to make sure the code is working, but 768 is considered the standard for tablets.

Hope this helps!

Hey, @babylon1999

Thank you So Much for your tip!!!, everything is working now just fine and as expected.

Also, I do apprecite your explanation, so I could learn a very useful tip .

It did help, all the best to you!!

Liliana

Hi @aflorarte

I’m glad we were able to help you here! ??

I will be marking this thread as Resolved. Should you have further questions, please do not hesitate to start another topic here.

Meanwhile, if you have a few minutes, we’d love it if you could leave us a review:

https://www.ads-software.com/support/plugin/woocommerce/reviews/

Thanks!

• This reply was modified 1 year, 12 months ago by xue28 (woo-hc).