[Resolved] Widgets on Off Canvas panel 2

[ustar]

Hi, There!

I added widget with sizes to Off Canvas panel.
But it looks very strange.
Widgets like this works on shop and category pages, you can see (for sizes, colors, seasons and brands) and i’d like to see the same style in Off Canvas panel. Is it possible?

Regards, Sergey.

[ustar]

Also i’d like to add widget “Active filters” on the panel.

[David]

Hi there,

try this CSS:

.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list {
    display: flex;
    flex-wrap: wrap;
}

.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}
.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list p {
    margin-top: 2em;
}

[ustar]

Hi, David!

Thanks for your answer and the code.
Works very good for “sizes” widget.

But i have 4 types of widgets.
– numbers in circles (sizes) – works very well!
– circles woth colors (colors) – wit no links now. Impossible to click.
– simple list of attributes (material, collection etc.) – collapsed too close now
– buttons with images (season, brand) – wit no links now. Impossible to click.

Is there any way to make them all work?

Regards, Sergey.

[David]

Can you disable the cache/optimization plugin you’re using

[ustar]

Hi, David!

This is without caching plugin.
Now activated:
GP Premium
HappyForms
STWooSwatches
WooCommerce
WooCommerce Pay for Payment
Woocommerce seo filter url
WP Google Maps
Yoast SEO
Zásilkovna Shipping Method

Regards, Sergey.

[ustar]

Hi, David!

Do you have any news?

Regards, Sergey.

[Tom]

Hi there,

Sorry, this slipped through somehow!

Is there an example of these buttons working normally somewhere? Maybe in a regular widget area on the site? I’m not seeing how the CSS David provided would stop the links from working.

Let me know 🙂

[ustar]

Hi Tom!

Thanks for your answer!

The code introduced by David helped for the widget with sizes. Before the changes, they were arranged in one vertical line and looked terrible. So the code from David solved the problem only with displaying the size widget in the off-canvas menu and did’t affect on other issues.
I will try to explain again in detail:

I have 4 types of widgets.
– numbers in circles (sizes) – works very well!
– circles with colors (colors) – wit no links now. Not clickable now.
– simple list of attributes (gender, material, collection etc.) – collapsed too close to each other. It looks as if the area of ​​this widget contains a table (I think 5 columns), but the columns are so small that there is not enough space for words.
– buttons with images (season, brand) – wit no links now. Not clickable now.

These widgets in large desktop mode works in the sidebar menu on pages like:
u-star.cz/boty/
u-star.cz/obleceni/
u-star.cz/nove/

Now I have added all possible product filter widgets to the off-canvas menu for clarity.

Regards, Sergey.

[David]

Try this CSS:

.woocommerce .slideout-navigation .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a {
    display: inline-block;
    flex: 1;
    line-height: 2em;
    padding: 25px;
}

[ustar]

Hi, David!

Almost, almost perfect.
Everethyng works fine except widgets with simple text links.

– simple list of attributes (Pohlaví, Edice, Materiál, Střich etc.) – collapsed too close to each other. It looks as if the area of ​​this widget contains a table (I think 5 columns), but the columns are so small that there is not enough space for words.

Most of them like example on page:
ustar2.sitedistrict.com/obleceni/

Regards, Sergey.

[David]

And this CSS to override that problem:

.slideout-navigation .slideout-widget .pohlavi {
    display: block !important;
}

[ustar]

This helped arrange the elements (filter values) with the filter values ​​vertically. That is, the table cells are arranged vertically. But the width of the cells has not changed. And if the text is large enough, it does not fit on one line in a cell.

I added a cell width to your code, for example:

.slideout-navigation .slideout-widget .material {
display: block! important;
width: 200px;
}
But it did not help.
These are still cells with a width equal to one word.

If I change the cell width

.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
width: 100%;

or

.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
width: 200 px;

then all such elements are changed, including sizes, but this is wrong. I want to change the width for filter values ​​only in text widgets.

In addition, I have added your code for each text widget. And of course, this greatly increases the css file …
Is it possible to apply the same style to a group of widgets to shorten the css code?

[David]

Remove all the CSS related to the slideout widgets and try this:

.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.velikost,
.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.barva,
.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.sezona {
    display: flex;
    flex-wrap: wrap;
}

.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.velikost .woocommerce-widget-layered-nav-list__item,
.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.barva .woocommerce-widget-layered-nav-list__item,
.slideout-navigation .slideout-widget .woocommerce-widget-layered-nav-list.sezona .woocommerce-widget-layered-nav-list__item {
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}

.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a {
    width: 100%;
    height: 100%;
}

[ustar]

hi, David!

Thanks, code works after a little modifications.

I’m really happy with this now ))

Regards, Sergey.

[Author]

Posts