Create Modern Looking/Functioning Filter by Categories

Hi there, I hope you are well.

How can I create a modern looking and functional filter by categories for my shop page? I also want to be able to select which product categories to display in the “filter by categories” section.

Would it be best to do something with HTML block? The in-built Woocommerce “Filter by Product Category” is not good and very limited.

Any guides and instructions will be appreciated.

Hello,

Navigate to Appearance > Menu > Create menu for sidebar and add the the menu as you want:
https://ibb.co/1Zt7LGT

Then Navigate to Appearance > Widgets > add the navigation menu and select the menu:
https://ibb.co/5npbn1t

Best Regards.

Hi there, thanks for the suggestion. But this is not nice because #1 it keeps all categories open which I have a lot of categories and #2 it does not ajax load products.

Is there no other way? Maybe with block HTML? I am just not sure how to do it this way but if there is a guide to build a product category menu using HTML block I will give it a try.

Hello,

Use the Product Categories Widget and remove the categories which you want with the help of custom css.

Try to add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. Change the Category ID with your own.

.widget_product_categories li.cat-item-1014 {
    display: none !important;
}

Best Regards.

Hi there, thanks that css is working.

Why do some filter options be in closed accordion and others are not accordion at all? Anyway to choose which ones are accordion and which aren’t?

See my screenshot please.

Attachments:

You must be logged in to view attached files.

Secondly, can you please help me add CSS to add a seperator below the widget titles on the shop archive page?

I tried this using the ::after element but it then interferes with the nav arrows that are also nested here. here is my CSS –

/* Add seperator to widget titles*/

.widget-title {
position: relative; /* Ensure the pseudo-element is positioned relative to the title */
}

.widget-title::after {
content: ”; /* Necessary to create a pseudo-element */
display: block; /* Ensures the pseudo-element takes up space */
width: 15%; /* 15% of the widget title’s width */
height: 3px; /* 3px thick */
background-color: #85c44c; /* Green color */
margin-top: 3px
}

Thank you!

Hello,

When you choose the option “Shop sidebar widgets collapse”. The “Filters only” variant works with WoodMart Layered Navigation widgets.

Best Regards.

Thank you.

Secondly, can you please help me add CSS to add a seperator below the widget titles on the shop archive page?

I tried this using the ::after element but it then interferes with the nav arrows that are also nested here. here is my CSS –

/* Add seperator to widget titles*/

.widget-title {
position: relative; /* Ensure the pseudo-element is positioned relative to the title */
}

.widget-title::after {
content: ”; /* Necessary to create a pseudo-element */
display: block; /* Ensures the pseudo-element takes up space */
width: 15%; /* 15% of the widget title’s width */
height: 3px; /* 3px thick */
background-color: #85c44c; /* Green color */
margin-top: 3px
}

Thank you!

Hello,

Can you please share the page URL I will check and give you a custom css code.

Best Regards.

[Author]

Posts