Filter Product by Category in WooCommerce

Setting up category filters in WooCommerce allows customers to easily browse products based on their interests. Here’s how to create categories, assign them to products, and enable filtering via the Dynamic AJAX Product Filters widget.

Step 1: Create a Category

  1. Navigate to Categories:
    • Go to Products > Categories in your WordPress dashboard.
  2. Add a New Category:
    • Fill in the required fields:
      • Name: Enter the name of the category (e.g., Laptop).
      • Slug: Create a URL-friendly version of the category name (e.g., laptop).
      • Parent Category: Select a parent category if applicable (optional).
      • Description: Provide a description for the category (optional).
    • Click the Add New Category button.
    • You will see the new category appear in the list.
create new category

Step 2: Add the Category 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 Category:
    • On the product edit page, locate the Categories section on the right panel.
    • Check the box next to the category you want to assign (or click Add New Category to create a new one).
    • After selecting the category, click Update or Publish to save your changes.
add category to product

Step 3: Remove or Add Categories in the Filter Widget Form

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

Step 5: Style/Design/Customize the Category Widget

  1. Access Form Style Settings:
    • Go to Product Filters > Form Style in your WordPress dashboard.
  2. Select Category from Dropdown:
    • From the Select Attribute dropdown menu, select the category you want to customize.
  3. Choose Category Style Options:
    • Select one of the style options:
      • Checkbox
      • Select
    • Each option provides a different way for users to interact with the filter.
  4. Select Suboptions:
    • Based on the style option you choose (Checkbox or Select), select the appropriate suboptions to configure the appearance and behavior of the category widget.
  5. Save Changes:
    • After customizing the category widget, make sure to click Save to apply your changes.

Learn More About Form Style

Step 5: Enable Hierarchical Options (Optional)

  1. Access Hierarchical Settings:
    • In the Form Style Settings, look for the Enable Hierarchical option.
  2. Choose an Option:
    • You can select one of the following:
      • Disabled: Hierarchical filtering is turned off.
      • Enabled: Hierarchical filtering is on, displaying parent and child categories.
      • Enabled & Separate: Parent and child categories are displayed separately.
      • Enabled & Hide Child: Parent categories are displayed, but child categories are hidden.

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.
category widget in filter form

Once set up, customers will be able to filter products by category on your webpage using the Dynamic AJAX Product Filters plugin. This enhances navigation and allows users to find products that meet their specific interests quickly and easily.