Setting Up Color & Image Swatches with Dynamic AJAX Product Filters

The Dynamic AJAX Product Filters plugin allows you to enhance your product filters by using color and image swatches. Here’s a step-by-step guide to setting up color and image swatches, including customization options.

Step 1: Create & Set Your Category, Tag, or Attribute

Before you can use color or image swatches, you need to create and assign the relevant categories, tags, or attributes to your products.

Step 2: Style/Design/Customize the Attribute Widget

  1. Access Form Style Settings:
    • Go to Product Filters > Form Style in your WordPress dashboard.

Step 3: Color Swatch Process

  1. Select Attribute for Color Swatch:
    • In the Select Attribute dropdown, choose the attribute you want to use as a color swatch.
  2. Choose Attribute Style Options:
    • Select Color as the style option.
  3. Select Suboptions:
    • Choose from the following suboptions:
      • Color
      • Color without border
      • Color circle
      • Color with value
  4. Advanced Options for Terms:
    • In this section, the color values will be auto-set based on your terms. If not, you can manually select your desired colors.
  5. Save Changes:
    • After configuring the settings for the color swatch, click Save to apply your changes and see the result.

Step 4: Image Swatch Process

  1. Select Attribute for Image Swatch:
    • In the Select Attribute dropdown, choose the attribute you want to use as an image swatch.
  2. Choose Attribute Style Options:
    • Select Image as the style option.
  3. Select Suboptions:
    • Choose from the following suboptions:
      • Image
      • Image without border
  4. Advanced Options for Terms:
    • In this section, the images will be auto-set based on your terms. If not, you can manually select your desired images.
  5. Save Changes:
    • After configuring the settings for the image swatch, click Save to apply your changes and see the result.

Once you have completed these steps, customers will be able to filter products using color and image swatches on your webpage. This feature enhances the user experience, allowing users to visually select their desired options more intuitively.