Mobile shop mode default

[serieux]

hi,

How can I set the default shop mode/view on mobiles to the small boxes (see photo).

So when clicking shop the open it up straight to that mode

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi there,

Add this custom css, and it will display grid layout on first load of mobile shop:

@media only screen and (max-width: 479px) {
.woocommerce .products .product {
  width: 50%;
  float: left;
}
}

Hope that helps!

– Ed

[serieux]

Thanks Ed!

[Kyle – SUPPORT]

Great, thanks Ed

[serieux]

Hi Ed,

}
@media only screen and (max-width: 479px) {
.woocommerce .products .product {
width: 50%;
float: left;
}
}

Is not working for me anymore?

Any ideas?

Thanks

[Kyle – SUPPORT]

Hi

Have you edited/added any custom css since?

– Kyle

[serieux]

This is the current List of Custom CSS. But Removed these all but the one i need, and deactivated all plugins except swift and woo commerce and still doesn’t work.

Thanks

}
@media only screen and (max-width: 479px) {
.woocommerce .products .product {
width: 50%;
float: left;
}
.order-actions .button {
background-color: #000!important;
color: #fff!important;
font-size: 14px!important;
}

.showlogin,.showcoupon,p.terms a{
text-decoration: underline !important;
}
.top-author-info, .author, .blog-item-details span.author, .author-info-wrap {
display: none !important;
}
.post-details-wrap {
width: 100%!important;

}
@media only screen and (max-width: 767px) {
.woocommerce span.onsale, .woocommerce .wc-new-badge, .woocommerce .out-of-stock-badge {
display: block;
}

#one-page-nav li i{
background:#252525 !important;
}

.order-actions .button {
background-color: #454545!important;
color: #fff!important;
font-size: 14px!important;

[Kyle – SUPPORT]

Remove the closing tag } from the top, and add one to the end to close the last rule

– Kyle

[serieux]

Hi, still not working, please see below updated:

@media only screen and (max-width: 767px) {
.woocommerce .products .product {
width: 50%;
float: left;
}
.order-actions .button {
background-color: #000!important;
color: #fff!important;
font-size: 14px!important;
}

.showlogin,.showcoupon,p.terms a{
text-decoration: underline !important;
}
.top-author-info, .author, .blog-item-details span.author, .author-info-wrap {
display: none !important;
}
.post-details-wrap {
width: 100%!important;
}

@media only screen and (max-width: 767px) {
.woocommerce span.onsale, .woocommerce .wc-new-badge, .woocommerce .out-of-stock-badge {
display: block;
}

#one-page-nav li i{
background:#252525 !important;
}

.order-actions .button {
background-color: #454545!important;
color: #fff!important;
font-size: 14px!important;
}

[Kyle – SUPPORT]

Change to:

.woocommerce .products .product {
  float: left!important;
  width: 50%!important;
}

– Kyle

[serieux]

Hi,

That worked perfectly, except for one issue, now i can’t use the the zoomed big product view.

Is there any way I can still be able to click the big box view where its just one product scroll, but have this view as default?

Thanks

[Kyle – SUPPORT]

I’m afraid not sorry, will see if we can have the option to chose a default layout for mobile but with the layout options to still work

– Kyle

[serieux]

Kyle that would be amazing!

Thanks

[Kyle – SUPPORT]

Will add to the list

– Kyle

[serieux]

Hi Kyle,

How can I add the word ‘View type’ next to the view types (see attached)

Thanks

Attachments:

You must be logged in to view attached files.