[Resolved] Off Canvas Woo Filter Widget

[melvin wang]

Hi,

After read and check your support forum, I’ve added Woo widget – filter by product attribute (Hotel Ratings) to the off canvas widget, display type i chose drop down as below

View post on imgur.com

Problem in off canvas:
When i click the dropdown, it doesn’t work.

View post on imgur.com

I then test the same widget on sidebar, and it work.

View post on imgur.com

Q1. Could you advice me how to make the woo widget filter-by-attribute-dropdown-layout works in off-canvas ?

Q2. For off-canvas at Shop & Category Archives, I would like the widget to stay on top of the primary navigation menu. What’s the code I’ve to use in hook element?

Q3. If I wanted to hide the primary navigation menu in Shop & Category Archives, may i know what’s the code I should use?

TQ

Regards,
Melvin Wang

[Tom]

Hi there,

1. Try this CSS:

.select2-container--open {
    z-index: 999999;
}

2. This should do it:

.woocommerce-widget-layered-nav {
    order: -10;
}

3. You could use our Disable Elements module along with the Elements module: https://docs.generatepress.com/article/layout-element-overview/

Let us know if you need more info 🙂

[melvin wang]

Hi Tom,

Thanks for your quick response.

`.woocommerce-widget-layered-nav {
order: -10;
}`

This works well. Asides, I’ve inserted the code to widget filter-by-price, so i try added this code.

.woocommerce-widget-layered-nav,
 .woocommerce-widget-price-filter {
    order: -10;

However the price filter still stay below

View post on imgur.com

P/s: sample page in private information.

Q1: Maybe my css isn’t correct? Could you please advice what’s the correct css?

You could use our Disable Elements module along with the Elements module: https://docs.generatepress.com/article/layout-element-overview/

I’ve tested this, it works. However it was my fault that didn’t clearly state my objective haha.
I would want hide the menu in Off-Canvas at Shop & Category Archives. But not the whole primary navigation.

View post on imgur.com

Q2. May i know how to hide the menu in Off-Canvas at Shop & Category Archives

Thank you Tom.

Regards,
Melvin

[Tom]

Try this:

.widget_price_filter {
    order: -9;
}

1. Where are you wanting it to display?

2. Try this:

.woocommerce .slideout-navigation .main-nav {
    display: none;
}

[melvin wang]

Hi Tom,

Thanks for the kind response.

`.woocommerce .slideout-navigation .main-nav {
display: none;
}`

I tested this code, it works to hide primary menu in off-canvas on Woo – shop page, category archieves, Tag Archieves and single-product.

Could it possibly not to hide on woocommerce single-product?

Thank you

Regards,
Melvin

[Leo]

Try this instead:

.woocommerce:not(.single-product) .slideout-navigation .main-nav {
    display: none;
}

[melvin wang]

Thanks Leo, it works.

Appreciate it

Regards,
Melvin

[Leo]

No problem 🙂

[Author]

Posts