Filter Product by Attribute in WooCommerce

The Dynamic AJAX Product Filters plugin allows you to filter products by attributes in WooCommerce. Here’s a step-by-step guide to setting up attribute filters, including customization options for the attribute widget.

Step 1: Create Attributes and Terms

  1. Navigate to Attributes:
    • Go to Products > Attributes in your WordPress dashboard.
  2. Add a New Attribute:
    • In the Add new attribute section, fill in the required fields:
      • Name: Enter the name of the attribute (e.g., Processor).
      • Slug: Create a URL-friendly version of the attribute name (e.g., processor).
    • Click the Add Attribute button.
  1. Add Terms to the Attribute:
    • After creating the attribute, click on the Configure terms link next to the attribute.
    • In the Add new term section, enter the name of the term (e.g., AMD Athlon) and click Add New Processor. Repeat this for all terms you want to add (e.g., AMD Ryzen 5, AMD Ryzen 7).

Step 2: Assign Attributes to Products

  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 Attributes:
    • In the product edit screen, locate the Product data section.
    • Click on the Attributes tab.
    • Select the attribute you created from the dropdown and click Add.
    • Check the box for the term(s) you want to assign to the product.
    • Click Save attributes and then click Update or Publish to save your changes.

Step 3: Manage Attributes in the Filter Widget Form

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

Step 4: Style/Design/Customize the Attribute Widget

  1. Access Form Style Settings:
    • Go to Product Filters > Form Style in your WordPress dashboard.
  2. Select Attribute from Dropdown:
    • From the Select Attribute dropdown menu, choose the attribute you want to customize (e.g., Color).
  3. Choose Attribute Style Options:
    • Select one of the style options:
      • Checkbox
      • Color
      • Image
      • Select
    • Each option provides a different way for users to interact with the attribute filter.
  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.
  5. Save Changes:
    • After customizing the attribute widget, make sure to click Save to apply your changes.

Step 5: 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 attributes on your webpage using the Dynamic AJAX Product Filters plugin. The customizable attribute widget enhances the user experience, allowing users to find products that meet their specific criteria efficiently.