Filter Product by Search in WooCommerce

Step 1: Manage  Search Product in the Filter Widget Form

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

Step 2: Style/Design/Customize the Search Product Widget

  1. Access Form Style Settings:
    • Go to Product Filters > Form Style in your WordPress dashboard.
  2. Select Product Search from Dropdown:
    • From the Select Attribute dropdown menu, choose the Search Product.
  3. The Search Filter comes with two different style options that you can choose from:
    • Style 1: Input Box with Search Button
    • Style 2: Simple Input with Icon

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

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.

Placeholder

Set the placeholder text displayed inside the search input field.
This option applies to both input and button styles.

Button Text

Set the label text displayed on the search button.
This option is available only when using the Button Style layout.

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.

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.

Enable / Disable Auto Suggestion

Enable live search suggestions while users type in the search field.

Search In

Define where the auto-suggestion will look for matches:

  • Title
  • Content
  • Excerpt
  • SKU
  • Tags
  • Categories
  • Attributes
  • Authors
  • Brands

You can select one or multiple sources.

Enable / Disable Full Match

When enabled, only exact keyword matches will appear in the suggestions.
When disabled, partial matches are also included.

Step 3: Save Changes

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

Step 4: 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 Product Search on your webpage using the Dynamic AJAX Product Filters plugin. This feature enhances the shopping experience by allowing users to quickly find desired products, ultimately improving user engagement and satisfaction on your website.