Product Filters

Setup and Configuration ↑ Back to top

Introduction to the editor ↑ Back to top

There are two panels in the editor.

  • The left side shows a list of elements.
  • The right side contains Settings for current element or project settings. By default, right panel contains project settings. To save the project, click Save on elements panel.
Editor

Creating elements ↑ Back to top

Click the “Add Element” button. A panel open with a list of elements. The first list is “Field” – here are elements responsible for filtering products. The “Layout” list content layout elements responsible to arrange field elements.

After selecting an element, this element appears on left side panel and, if necessary, settings of this element appears on right side panel.

Add element

Setting up the project ↑ Back to top

Field “Title” – name of project that is only visible in the Admin Panel.

Field “Filtering starts” – mode of applying filters to products.

Option “Automatically” – filters are applying immediately when you activate them.

Option “When on click send button” – filters are applying only after clicking on “apply” button. In this case, you need to create a “Button” element and specify “Filter” option in “Action” field.

Field “Which components to use” – content of components will be updated when filtering. For example, if “Pagination” component is enabled, you can turn on ajax pagination.

Field “Pagination ajax” – switch to enable/disable ajax pagination.

Field “Sorting ajax” – switch to enable/disable ajax sorting.

Fields “Products container selector”, “Pagination selector”, “Result count selector”, “Sorting selector”, “Page title selector – element selectors on page.

Setting up elements ↑ Back to top

Options for list element (CheckBox List, Radio List, DropDown List, Color List, Box List, Text List)

Field “Title” – title that will be displayed on top of list. It implements clients with understanding what the element filter.

When you change filter, an attribute appears in url. Field “URL key” – name of attribute in url or URL-friendly version of element name. For example, field “URL key” value “brands” will appear in url http://my-shop.com/shop/?brands=appel,samsung

Field “Query type” – query type that allows you to apply multiple filters.

Option “AND” – show only products that satisfy both conditions setted by the user through applied filters.

Option “OR” – search returns all products that satisfy at least one of the conditions setted by the user through applied filters.

Field “Multi select” – enable/disable multiple selection.

Field “Source of items” – select source of items for a list that will be using to filter products.

Option “Attribute” – means product attributes to be displayed (see “Products > Attributes”).

Option “Category” – means product categories to be displayed (see “Products > Categories”).

Option “Tag” – means product tags to be displayed (see “Products > Tags”).

Option “Taxonomy” – means product taxonomy to be displayed. This option can be use when there are plugins extending capabilities of WooCommerce. For example, you have plugin “WooCommerce Brands” installed. With option “Taxonomy” you can display list of brands.

Field “Attribute” – from which attribute the items will be taken. You can see attributes on “Products > Attributes”.

Field “Category” – allow to select: show all categories with subcategories or subcategories for one selected category. You can see categories on “Products > Categories”.

Field “Taxonomy” – from which taxonomy the items will be taken. For example, if you have plugin “WooCommerce Brands” installed, you can set taxonomy of “Brands”.

Field “Display” – display items mode.

Option “All” – display all items.

Option “Only Parent” – display only top-level items, without child sub-items.

Option “Only Selected” – display only specified items.

Option “Except selected” – displays all items except selected ones.

Field “Select items” – items that will be displayed.

Field “Exclude items” – items that will not be displayed.

Field “Display hierarchical” – switch to display items as a tree or a list.

Field “URL value format” – format of value in url attribute.

Option “ID” – display a unique item number.

Option “Slug” – output URL-friendly version of item name.

Field “Show reset item” – display reset value item.

Field “Title reset item” – title of reset item.

Field “Display title” – display element title.

Field “Display toggle content” – display the toggle to hide content.

Field “Default toggle state” – default state(show/hide).

Field “CSS Class” – css class for element.

Field “Action for empty options” – actions with filter items when no available products.

Field “Display product counts” – show/hide product counts in items.

Field “Display rules” – under what conditions to show element.

“Display Rules” allows you to create a set of rules that decide when to display an element in filters.
Note that layout rules can be grouped to create any combination of and “and” “or” operators.

1. Rule type
When editing a element, ‘types’ drop down is first dropdown in location rule row.
Here you can specify one of following elements: “Category”, “Attribute”, “Taxonomy”, “Tag”, “Page”.

2. Rule operator
This step is optional and not required for your custom location rule to work. When editing a elment, ‘operators’ drop down is second dropdown in location rule row.

3. Rule value
When editing a element, ‘values’ drop down is the third dropdown in location rule row. This list is dynamically updated based on ‘type’. For example, when chose “Category” in “type” field, categories will appear here.

Additional options for Color List element

“Colors” field is used to configure colors. To add a color, click “Add Item” button.

“Type” field specify method of setting color with a color picker or a picture (for example, camouflage color or black and white dots).

Fields “Color” and “Image” – color or picture that client will see.

Field “Value” – value by which products will be filtering.

Field “Display border” – enable/disable border around item.

Field “Border color” – color of border around item.

Field “Marker style” – marker style. For example, if color is white, marker should be dark and vice versa, if color is black, marker should be light.

 

Additional options for Box List element

Field “Box size” – height and width of box item.

 

Additional options for Text List element

Field “Inline style” – switch to show items inline or one item per line.

 

Options for Price Slider element

Field “Title” – title that will be displayed on top of element. It implements clients with understanding what the element filter.

Field “URL format” – format of attribute in url.

Option “Parameters through a dash” – minimum and maximum value will be sent using a dash. For example http://my-shop.com/shop/?price=10-150

Option “Two parameters” – for minimum and maximum values, a separate url attribute will be created. For example, http://my-shop.com/shop/?min-price=10&max-price=150

When you change filter, an attribute appears in url. Field “URL key” – name of attribute in url or URL-friendly version of element name. Field “URL key for minimum price” and “URL key for maximum price” – name of attribute of minimum and maximum prices in url.

Field “Display title” – display element title.

Field “Display toggle content” – display the toggle to hide content.

Field “Default toggle state” – default state(shown/hidden).

Field “CSS Class” – css class for element.

 

Options for Button element

Field “Title” – button text.

Field “Action” – button action.

Option “Reset” – reset all applied filters.

Option “Filter” – apply selected filters to products. This action is necessary when option “When on click send button” is selected in “Filtering starts” field.

Field “CSS Class” – css class for element.

 

Options for Simple Box element

Field “Title” – title that will be displayed on top of element.

Field “Display toggle content” – display the toggle to hide content.

Field “Default toggle state” – default state(shown/hidden).

Field “CSS Class” – css class for element.

 

Options for column

Field “Width” – column width can be set in percentage or in pixels.

 

Filter for product archive ↑ Back to top

To set which project will filter products on an archive page, follow these steps.

  1. Go to WooCommerce > Setting > Products.
  2. Click on “Filters” subtab.
  3. In “Product archive filters” field, select project
  4. Click “Save changes”

Elements ↑ Back to top

Checkbox ↑ Back to top

Radio List ↑ Back to top

Drop-Down List ↑ Back to top

Color List ↑ Back to top

Box List ↑ Back to top

Text List ↑ Back to top

Price Slider ↑ Back to top

Button ↑ Back to top

Widgets ↑ Back to top

Widget “Product Filters” ↑ Back to top

This is the main plugin widget. This widget displays a form with elements that you have created in the project. When interacting with options, products are filtering.

Widget “Notes for Product Filters” ↑ Back to top

This widget displays a list of the selected options in the filter. You can also quickly remove the required option by clicking on cross button.

Shortcodes ↑ Back to top

Product Filters ↑ Back to top

[wcpf_filters id=”You filter project id”]
This is the main plugin shortcode. This shortcode displays a form with elements that you have created in the project. When interacting with options, products are filtering.

Notes for Product Filters ↑ Back to top

[wcpf_filter_notes filter-id=”You filter project id”]
This shortcode displays a list of the selected options in the filter. You can also quickly remove the required option by clicking on cross button.

Using shortcodes woocommerce ↑ Back to top

If you use shortcodes woocommerce for output products ([products], [recent_products], [sale_products], [best_selling_products], [top_rated_products], [featured_products]), add “filter-id” parameter so that plugin can filter products. For example, [products paginate=”true” filter-id=”100″].
To enable sorting in shortcode, add the “use-sorting” parameter. For example, [products paginate=”true” use-sorting=”true” filter-id=”100″].

Override templates in a theme ↑ Back to top

To change element templates in theme, you need to create a “woocommerce-product-filter” folder inside theme. All templates can be found in the folder “plugins/woocommerce-product-filter/templates/”. Copy template file to “woocommerce-product-filter” folder inside theme and make changes according to your needs.

FAQs ↑ Back to top

What is a taxonomy? ↑ Back to top

A taxonomy is a way to group related products or other content.

For example, in your store there may be a taxonomy of “Clothing” and then you would assign Shirts, Pants, Socks, Dresses, Skirts.

Taxonomies can be helpful because they allow shoppers to find related products.

What is an attribute? ↑ Back to top

More info at: Product Attributes.

What is a category? ↑ Back to top

More info at: Product Categories.

What is a tag? ↑ Back to top

More info at: Product Tags.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top