WooCommerce Product Filter plugin is fully compatible with WooCommerce Brands plugin and supports filtering by brand
WooCommerce Brands allows you to create brands for your shop, with a name, description, and image assigned to each.
Check out this article to learn how to set up product filtering by brand.
Filter by Brand
Step 1. Get plugins
First, make sure you have installed and activated the plugins:
Step 2.Creating brands
To start adding brands:
- Go to: WooCommerce > Products > Brands. The interface looks and works similar to adding categories and tags — the form on the left lets you add a brand, which are then displayed on the right.
- Enter a Name and Description. Image is optional. Brands can be hierarchical, specifying a ‘parent’ with ‘child’ brands under it.
- Select Add New Brand to save.
Step 3. Editing and deleting brands
Modify Brands by hovering over the Name and click Edit or Delete. Brands may also be re-ordered by dragging and dropping.
Step 4. Assigning a brand to a product
Assigning brands to products is the same process as adding categories and tags.
- Go to: WooCommerce > Products.
- Select a product to assign a brand.
- Find the Brands box in the right sidebar.
- Tick the box of brands you wish to assign to the product.
- Update or Publish to save changes.
Now, go to the WooCommerce Product Filter plugin and choose to edit the filter you want (or create a new one)
Next, add a filter by the brand to your product filter, for this, in the “Select filters to add” field (in the Content tab), select the Perfect brand filter and click add.
Step 6. Setting up a filter by brand
Click the drop-down arrow to configure any brand filter options you don’t need.
- Edit Filter title and description
- Show title label. Here you can choose how to show the title with the function of opening/closing the filter:
- desktop (No; Yes, show as close; Yes show as opened)
- mobile (No; Yes, show as close; Yes show as opened)
- Show on frontend as. Depending on whether you need one or several brands to be available at the same time, you may show your brands list as :
- Radiobuttons list (single select)
- Dropdown (single select)
- Checkbox list (multiple select)
- Show hierarchical. Show paternal and subsidiary brands (for checkbox list). If you display only some brands, make sure that the parent brands are selected.
- Collapsible. If enabled, then show only parent elements, if there are children, they are minimized. (Only available for Radiobuttons list and Checkbox list)
- Show images. Show element image. Not working with dropdown.
- Alphabetical index. Show the Alphabetical index. Works only for parent elements.
- Sort by. Here you may set brands sorting by ascendance or descendance.
- Order by custom. Brands are displayed according to the order of their selection in the input fields.
- Hide brands parent. Show only brands children
- Show count. Show count displays the number of products that have the appropriate parameter.
- Hide brands without products. Do not show the filter option if there are no products with such a brand.
- Select Product brands. Select product brands to be displayed on your site from the list. If you want to select several brands, hold the “Shift” button, and click on brand names. Or you can hold “Ctrl” and click on brand names. Press “Ctrl” + “a” for checking all brands.
- Make selected brands as default. Selected brands will be marked as default and hidden on the frontend.
- Clear filter only to selected brands. When the filter is clear, he will be filtered only by selected items. Be careful when using two or more brand filters!
- Exclude terms ids. Exclude brand terms from the filter by ids. Example input: 1,2,3.
- Show search. Show search display the bar for searching by brand name in the filter
- Hide child. Hide child taxonomy.
- Always display all brands. If checked, the entire list of brands will always be visible, otherwise only available for filtered items.
- Layout. Select a vertical or horizontal layout and set the count of columns.
- Maximum height in frontend. Set maximum displayed height in frontend.