Shop sidebar questions

[micheal_w]

Hi guys,

I’d like to fine tune my shop page:

1. Is it possible to hide the shop sidebar on tablet too? It disappears on mobile, but I would like it to hide on tables too if possible.

2. Is there any chance to make that sidebar narrower? Half of the sidebar is just a waste of place with the huge white part (see above link)

3. I am using full width setup. However the products go underneath the sidebar when the sidebar finishes. Can they stay in their place and leave the space under the sidebar empty? (see above link)

4. Under Theme Options > Woocommerce options > Product Filter, there are 3 setup options: disabled / enabled / mobile only.
I would like the filter to be displayed on tablet and mobile (hide it on desktop only). Is it possible?

Thanks!
M.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Please add this to Theme Options => Custom CSS:

@media only screen and (max-width: 991px)
.products .sidebar {
    display: none;
}
}

2) Do so here: Theme Options => General Options => Sidebar Width

3) Not currently using the fullwidth masonry layout you have selected.

4) Please add this to Theme Options => Custom CSS:

.woo-aux-options {
    display: none;
}
@media only screen and (max-width: 1024px) {
.woo-aux-options {
    display: block!important;
}
}

Thanks,
David.

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

1)

I have updated to:

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
.products .sidebar {
    display: none;
}
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
.products .sidebar {
    display: none;
}
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
.products .sidebar {
    display: none;
}
}

2)

Please test this:

.sidebar.left-sidebar.col-sm-3 {
    width: 16.333%;
}

3)

Please test this:

@media (min-width: 767px) and (max-width: 991px) {
.woo-aux-options {
    display: block!important;
}
}

[micheal_w]

Hi David,

1) works perfectly, thank you!

2) If I use your code, the shop page changes from this: https://www.dropbox.com/s/jg5ms0w1ytlgvf4/Screen%20Shot%202016-11-09%20at%205.31.29%20pm.png?dl=0

to this: https://www.dropbox.com/s/waffrh8w9jz60i9/Screen%20Shot%202016-11-09%20at%205.31.22%20pm.png?dl=0

As you can see, the sidebar becomes 1/3 (which is perfect) but the 3 column product layout becomes 2)
Can it be fixed please?

3) the css didn’t do anything unfortunately, the products still go underneath the side bar
Any other solution for that please?

M.

[David Martin – Support]

2) This is tricky, this should improve it, you may need to adjust the second percentage by a small fraction to get it perfect:

.sidebar.left-sidebar.col-sm-3 {
    width: 16.333%;
}
.woocommerce ul.products li.product.col-sm-3 {
    width: 15%;
}

3) Nothing further can be done for this using the fullwidth layout. You would need to use a developer to help you.

Thanks.