Mobile product columns + store notice

xuanzer · December 2016

Hi! I have 2 questions:

1) How do I make it such that the mobile version of my products page has 2 columns instead of 1?

2) Regarding the WooCommerce store notice function, how can I make it not sticky/fixed?

Thanks!

Albert · December 2016

Hey,

1. To display products in 2 columns instead of 1 on mobile, please use the following css:

@media only screen and (max-width: 767px) {
    .woocommerce ul.products li.product { width: 48% !important; }
}

2. Do you mean to disable "Free local shipping on all orders above $40!" notice on mobile devices?

xuanzer · December 2016

Thanks for the css code! Worked perfectly.

No, I meant to make it such that it's not fixed at the top of the screen even when I'm scrolling down! :-)

Albert · December 2016

This is a WooCommerce feature and it's position has completely nothing to do with the theme. And the only solution we have is the following css:

.woocommerce-demo-store { margin-top:0 !important; }
.woocommerce-demo-store #Wrapper { margin-top: 45px !important; }
.woocommerce-demo-store p.demo_store { position: absolute !important; }

Mobile product columns + store notice

Comments