Filter Product by Brands in WooCommerce

Step 1: Create a Brand

  1. Navigate to Tags:
    • Go to Products > Brands in your WordPress dashboard.
  2. Add a New Tag:
    • Fill in the required fields:
      • Name: Enter the name of the brand (e.g., Dell).
      • Slug: Create a URL-friendly version of the brand name (e.g., dell).
      • Parent Brand: Assign a parent term to create a hierarchy.
      • Description: Provide a description for the brand (optional).
      • Thumbnail: Upload or add image to thumbnail
    • Click the Add New Brand button.
    • The new brand will appear in the list.

Step 2: Add the Brand to a Product

  1. Go to All Products:
    • Navigate to Products > All Products.
  2. Edit or Add a New Product:
    • Click on an existing product to edit it or click Add New to create a new product.
  3. Assign the Tag:
    • On the product edit page, locate the Brand section on the right panel.
    • Check the box next to the tag you want to assign (or click Add New Brand to create a new one).
    • After selecting the brand, click Update or Publish to save your changes.

Step 3: Manage Brands in the Filter Widget Form

  1. Access Filter Settings:
    • Go to Product Filters > Form Manage in your WordPress dashboard.
  2. Show Brands:
    • In the settings, find the Show Brands option.
    • Toggle this option on or off to control whether brands appear in the filter widget.

Step 4: Style/Design/Customize the Brand Widget

  1. Access Form Style Settings:
    • Go to Product Filters > Form Style in your WordPress dashboard.
  2. Select Authors from Dropdown:
    • From the Select Attribute dropdown menu, choose Brands
  3. Choose Custom Fields Style Options:
    • Select one of the style options:
      • Checkbox
      • Image
      • Select
  4. Select Suboptions:
    • Based on the style option you choose, configure the suboptions to customize the appearance and functionality of the attribute widget. This may include selecting colors for the color option or uploading images for the image option.

Optional Settings

The Optional Settings section allows you to control the appearance, behavior, and ordering of individual filter widgets.

Enable Minimization Option

Controls whether the filter widget can be collapsed.

  • Disabled – Filter always stays expanded
  • Enabled with Arrow – Toggle using an arrow icon
  • Enabled without Arrow – Toggle without showing an icon
  • Initially Minimized – Filter loads in collapsed state

Single Selection

Allows only one filter value to be selected at a time.

Show / Hide Number of Products

Displays the product count next to each filter term.

Max Height

Sets a maximum height for the filter list.

  • Enter 0 to disable height restriction
  • Useful for long lists with scrolling

Show / Hide Widget Title

Controls the visibility of the filter title on the frontend.

  • Show – Display title
  • Hide – Hide title

Widget Title

Set a custom title for the filter widget.

Order Values / Terms By

Controls how filter values are sorted.

  • Default
  • Alphabetically (A–Z)
  • Numeric
  • Product Count
  • Month & Year
  • Menu Order

Order Direction

Defines sorting order.

  • Ascending
  • Descending

Advanced Settings

The Advanced Settings section lets you fine-tune filter behavior, appearance, and user interaction, including term logic, search options, tooltips, and auto-suggestion.

CSS Class

Add a custom CSS class to the filter widget for custom styling or JavaScript targeting.

Operator (OR / AND)

Controls how multiple selected terms are applied:

  • OR – Products matching any selected term
  • AND – Products matching all selected terms

Include / Exclude Terms From Filters

Control which terms are displayed:

  • None – Show all terms
  • Include – Show only selected terms
  • Exclude – Hide selected terms

Terms Search

Helps users quickly find filter options, especially useful for long term lists.

  • Enable / Disable Terms Search – Show or hide the search field
  • Terms Search Title & Placeholder – Set label and placeholder text
  • Terms Search Position
    • In title bar
    • After title
    • After all terms
  • Layout
    • Vertical
    • Horizontal

Tooltip Settings

Provides additional information for filter terms.

  • Enable / Disable Tooltip
  • Tooltip Text – Set tooltip content

Show in Active / Chips Filter Widget

Displays selected filter terms in the Active Filters or Chips widget for easy visibility and removal.

Step 5: Save Changes

After customizing the category widget, make sure to click Save to apply your changes.

Step 6: Display the Product Filter on Your Webpage

  1. Insert Filter Shortcode:
    • Visit the page where you want to display the product filter.
    • Add the shortcode plugincy_filters to the desired location (e.g., in a page or widget).
  2. Optional Product Shortcode:
    • If you want to display products alongside the filters, you can also include the shortcode products.
  3. Customize Sidebar or Page:
    • You can add the filter shortcode to a sidebar widget or directly within a page’s content.

Once you have completed these steps, customers will be able to filter products by Brands on your webpage using the Dynamic AJAX Product Filters plugin.