Return to previous page

Css adjusting filters and sorting on the store page

This topic has 7 replies, 3 voices, and was last updated 8 months, 1 weeks ago ago by Andrew Mitchell

Kombajn88

Participant

March 19, 2024 at 13:09
Hello,

in this topic you have helped me to make the filters also display when you click on the filters at the top (image 1):

https://www.8theme.com/topic/displaying-filters-after-clicking-on-the-top-filters/#post-387507

But I have another problem, I would like to get an effect like in the 2nd picture.

I tried to create a css, but unfortunately with poor results:
```
.open-filters-btn {
  width: 100%; 
  box-sizing: border-box; 
  display: block; 
}

.open-filters-btn a {
  display: block; 
  padding: 10px;
  background-color: #cccccc; 
  border: 1px solid #333; 
  text-align: center;
  color: white; 
  text-decoration: none; 
  cursor: pointer;
}

.woocommerce-ordering {
  width: 100%; 
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  padding: 10px;
}

.woocommerce-ordering select {
width: 100%; 
padding: 10px;
background-color: #cccccc; 
border: 1px solid #333; 
}
```
Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.
#387518 Copied Theme version: 9.2.9
6 Answers

Kombajn88

Participant

March 19, 2024 at 13:54

In order for the “filters” at the top to display properly I need a shop widget sidebar, but when I add an element there, a blank space appears that expands and collapses

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#387530 Copied
Luca Rossi

Support staff

March 19, 2024 at 13:58
Hi @Kombajn88,

Please also add this custom CSS:
```
body .shop-filters.widget-columns-3.filters-opened {
    display: none;
}

body .filter-wrap {
    margin-bottom: 0;
    border: 1px solid var(--et_border-color);
    border-bottom: 0;
}

body form.woocommerce-ordering {
    width: 50%;
}

body .woocommerce-ordering select {
    border: none;
    border-left: 1px solid var(--et_border-color);
}
```
Hope it helps!
#387531 Copied
Kombajn88

Participant

March 20, 2024 at 22:05

Thank you so much for all the help I have received from you in all the topics, I don’t even know how to express my appreciation and thanks for the immense help received.

Certainly the help department here deserves a raise.

P.S 5 stars given as if what.

#387758 Copied
Kombajn88

Participant

March 20, 2024 at 23:07
I discovered yet a small problem with the function of this code.

In mobile mode the code works great, but in tablet and laptop mode it pops up blank when clicked (this is due to this: shop filters–> text block).
Is there any way to block it from popping up?

In laptop mode I used the code:
```
.open-filters-btn {
    display: none !important;
}
```
but it only removed the filters, without removing that empty space

Files is visible for topic creator and
support staff only.
#387759 Copied
Luca Rossi

Support staff

March 21, 2024 at 04:21
Hi @Kombajn88,

Please also add this custom CSS:
```
.shop-filters.widget-columns-3 {
    display: none;
}
```
Best Regards,
The 8Theme Team
#387769 Copied
Andrew Mitchell

Support staff

March 21, 2024 at 15:55

Dear Kombajn88,

As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

Click here to share your valuable perspective: https://themeforest.net/downloads

Your time and trust are highly appreciated!

Best Regards,
The 8Theme Team

#387906 Copied
Tagged: css adjusting filters, woocommerce templates
Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Css adjusting filters and sorting on the store page’' has been successfully resolved, and the topic is now closed for further responses

Css adjusting filters and sorting on the store page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection