Woocommerce Product Filter

Support
#1

Okay, I have a dumb question.

I want to display the Woocommerce Product filter as outlined below so that end users can filter by product category:

I do not want a sidebar. I would like the product filter to appear at the top of the shop page. I’ve tried adding it to Header 1, header 2, etc., but it never appears.

How do I add the product filter at the top of the shop page?

Thanks!

#2

Hi Ashley,

Those header 1, header 2 on Appearance > widgets by default are for LEGACY HEADERS. The following setup should be set on Theme Options > Header for LEGACY HEADER. It is accessible via the triangle on upper right part.

But you are using PRO HEADER and there’s a way to access it using header builder. Now, try this:
1.) Duplicate the current pro header that appears on shop page.
2.) Assign this new duplicated header as your shop page header then edit it.
3.) Add another bar, one container, then add widget element
4.) Choose the header widget where you add the woocommerce product filter.

Hope this helps.

#3

Thanks! I’ve done as you suggested with the Pro headers, but the filter still isn’t showing up.

Any suggestions?

#4

Hi Ashley,

I tried to set it on shop page briefly to see the issue. I can confirm the widgets returns blank. I have check other products randomly and there’s no attributes added to it. It seems it doesn’t appear because products doesn’t have attribute yet? Can you confirm you have added product attributes?

#5

Thanks! That was my mistake. I thought I had added categories. I have it working now, but how can I style it so that

  1. the “product categories” header isn’t showing
  2. it is the same size as the other default filter options that are showing
  3. can I make it inline with those other options, or even replace one of them?

Thanks!

#6

Hi Ashley,

  1. Please navigate back to Appearance > Widget area and leave the Product Categories widget’s title empty.

  2. To make the Product Categories widget the same size as the sorting widget, please add this to the Widget Area’s Element CSS area

$el.x-bar-widget-area .select2-selection {
    height: 2.65em;
    padding: 0 7px;
    border: 2px solid #e5e5e5;
    border-radius: 0;
    line-height: 2.35em;
    font-size: 11px;
}
  1. Yes, that is possible with customization, but that would fall outside of the scope of support that we can offer. You might want to try to use a 3rd party filtering plugin.

https://wordpress.org/plugins/search/Products+Filter+for+WooCommerce/

Hope it helps,
Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.