Sidebar on mobile by click

Hi there,

Are you using the off canvas navigation?

If so you can try adding a product filter widget in the off canvas widget area:
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

Hi Leo,

I want to see them in desktop resolution.
Will they be seen if I put them in off canvas?

Hi there,

you would have to include the filter widgets in the sidebar as well.
We can then provide some CSS to hide them on Mobile.

Hello David,
Thanks for suggestion.

I guess no need to add same content twice.
I decided to try the method from niche theme (site library)

But I couldn't success to have similar results. If you have time, can you check where is my mistake?

I follow the instructions from here. https://gpsites.co/niche/how-the-shop-was-made/#more-349

1. "Hook #1 – Woocommerce Shop Category Menu."
I didn't do it because I have too many categories. It become too crowded.

2. "Hook #2 – Woo Shop Filter and Breadcrumb"

I have added 2 functions like this;
https://prnt.sc/v9eqe3
https://prntscr.com/v9eqe3

Then I have added CSS like this;
https://prnt.sc/v9esa6

Result part;
1. I still have the menu (off-canvas menu) on desktop too. while niche theme doesn't have.
https://prnt.sc/v9faz6

2. Filters are not seen properly.
2.a Numbers stays in another line.
2.b. If I added an attribute filter in dropdown mode, options can't be seen.
https://prnt.sc/v9faz6

3. I couldn't manage to have similar looking like in here.
https://prnt.sc/v9f158
https://prnt.sc/v9f3cu

1. To remove the menu from the Desktop Off Canvas you would use this CSS:

@media (min-width: 768px) {
    .slideout-navigation .main-nav {
        display: none;
    }
}

2, Did you resolve these issues?

3. For the Filter Toggle to display correct when using SVG Icons you need to replace this:

<span class="slideout-toggle woo-filter-toggle hide-on-mobile"><a href="#">FILTER</a></span>

with this:

<?php
$icon = '';

if ( function_exists( 'generate_get_svg_icon') ) {
	$icon = generate_get_svg_icon( 'menu-bars' );
}
?>

<span class="slideout-toggle woo-filter-toggle hide-on-mobile has-svg-icon"><a href="#"><?php echo $icon; ?> FILTER</a></span>

Dear David,

Thanks a lot for support.

1 and 3 worked great. Thanks again.

2.a solved by this code. Sorry I missed that in advance. https://gpsites.co/niche/off-canvas-panel/#more-367
2.b is still there. When I add dropdown filter, I can't see the attributes.

4. I see the category name in the top. I tried this css but couldn't increase font size and also uppercase. https://prnt.sc/v9owry

.woocommerce-products-header {
padding: 20px;
height: 60px;
background-color: #092143;
text-transform: uppercase !important;
text-align: center;	
font-size: 50px !important;
font-weight: 500;
color: #ffffff;
}

2b. Did you resolve this - found one attribute and the count number is inline?

4. Use this CSS to size and style the H1

.woocommerce-products-header h1 {
    font-size: 50px;
    text-transform: uppercase;
}

Hello David,

Thanks.

4. Will this CSS change other H1's in the site?

2b. This is related with dropdown style attributes. https://prnt.sc/va51wa
We can't see them when they are dropdown.
but list style is working.

5. Selected filters are on top of each other. Do you have any suggestion? https://prnt.sc/va51wa

4. No it will only apply to the H1 displayed on the product archives.

I can't access your site ? Can you check the URL

Hi,
Added again.
thanks

Sorry - but none of us are able to access that link, the login is coming back invalid.

It is weird, I have created another password and tried in different browser.
It worked.

Can you try again?

You have add this CSS:

.slideout-widget.woocommerce ul li {
    line-height: 2em;
    display: grid;
    grid-template-columns: 0 90% 10%;
}

Change it to:

.slideout-widget.woocommerce ul li:not(.chosen):not(.select2-search) {
    line-height: 2em;
    display: grid;
    grid-template-columns: 0 90% 10%;
}

Thank you, I solved selected filters issue.
But dropdown problem is still there. Any idea?

Thanks