Mobile Homepage Product Layout

[geminicontacts]

Currently on homepage (mobile version) only one product shows at a time.
How can I adjust this?
I’d like to show at least two products at a time.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

@media only screen and (max-width: 767px) { 
.woocommerce ul.products li.product.col-sm-3 {
  float: left;
  width: 50% !important;
}
}

– Kyle

[geminicontacts]

Unfortunately this did not work. There was no change in product size.

[Mohammad – SUPPORT]

Hi,
It should work. Please provide me specific page url to check in detail.
Thanks
Mohammad

[geminicontacts]

This reply has been marked as private.

[David Martin – Support]

Hi,

1)

Please test this:

@media only screen and (max-width: 479px) {
.woocommerce .products .product.product-layout-grid {
    width: 100%!important;
    float: left;
}
.owl-carousel .owl-item {
    float: left;
    width: auto!important;
    max-width: 185px!important;
}
}

2) Set this option to “Standard” Theme Options => WooCommerce Options => Shop Options => Product Display Layout

Thanks.

[geminicontacts]

We are close!
Thank you.

1) 2 products show, however, the window cuts off the second product. So you see half of the products.

2) The problem here is that I would like the default to be the grid layout, and when standard is selected it goes to the 4 column view. Currently, with grid layout selected as the default, both grid and standard show the same amount of columns.

After I changed the default to standard, I see 4 columns when I first open the shop page. When I click on grid I see 5 columns. This is fine – but I would like the reverse. To have grid as default with 5 columns and standard as 4.

[David Martin – Support]

1) Please adjust the max-width, as below:

@media only screen and (max-width: 479px) {
.woocommerce .products .product.product-layout-grid {
    width: 100%!important;
    float: left;
}
.owl-carousel .owl-item {
    float: left;
    width: auto!important;
    max-width: 180px!important;
}
}

2) Unfortunately that is not possible to combine the layouts as you describe.

Thanks

[geminicontacts]

Hello,

I don’t intended to combine them.
I’d like grid to be the default (as set in theme options) and then standard to be a different layout.
Currently they display the same number of columns when grid is set to default layout for shop page.

[geminicontacts]

Checking to see if you all saw my last response from 2 days ago.

[David Martin – Support]

Hi,

2) On your shop page this is already happening: http://d.pr/i/19egR Ex: Grid 5 cols and Standard 4. Seen here: http://geminicontacts.com/shop/

Thanks.

[geminicontacts]

Yes this is when shop default is set to Standard.
I would like to set default to grid and have it behave in the same way.

So the shop is set to grid (5 columns) – visitor navigates to shop page and sees grid layout. They click on standard and see standard layout with 4 columns..

[David Martin – Support]

Hi,

That is very hard to do smoothly as the grid classes are already set to 5 columns.

You can try this:

.post-type-archive-product ul.products li.product.product-layout-standard.col-sm-sf-5 {
    width: 25%!important;
}

Thanks.

[geminicontacts]

Hi David,
I think we are still missing each other.
5 column is fine. How do I set default to grid (5 column) and have standard be 4 columns?

[David Martin – Support]

You can choose that here: Theme Options => WooCommerce Options => Product Display Layout => Grid.

I can no longer see your site without a login, please add the WP details for me.

Thanks.