The Dynamic AJAX Product Filters plugin allows you to use color swatches to enhance your product filtering options. Here’s a detailed guide on how to customize the color swatch design, including all available suboptions.
Step 1: Access Form Style Settings
- Navigate to Form Style:
- Go to Product Filters > Form Style in your WordPress dashboard.
- Select Attribute:
- From the Select Attribute dropdown, choose the attribute that you want to customize with color swatches (e.g., Color).
Step 2: Choose Color Swatch Style Options
- Select Attribute Style Options:
- Choose Color as the attribute style option. This will enable the various color swatch design options available for customization.
Step 3: Customize Color Swatch Suboptions
After selecting Color as the style, you will see several suboptions to choose from:
- Color
- This option displays color swatches as colored boxes. Each box represents a specific color associated with the attribute. Users can click on these boxes to filter products by the selected color. This is the most straightforward and commonly used design for color swatches.
- Color without Border
- Similar to the standard color option, but without any borders around the color swatches. This gives a cleaner and more modern look. It allows the colors to blend seamlessly into the design, making it suitable for minimalist interfaces.
- Color Circle
- This option uses circular swatches instead of square boxes. Each color is displayed in a circle, providing a softer look. This design can make the interface feel more friendly and approachable, appealing to users who prefer rounded shapes.
- Color with Value
- This option displays color swatches along with the color name or value. Each swatch shows the actual color and its corresponding label (e.g., “Red,” “Blue”). This is helpful for users who may not be able to identify colors easily and ensures clarity in the filtering process.
Step 4: Advanced Options for Terms
- In the Advanced Options for Terms section, you will see that color values will be auto-set based on the terms you have created. If necessary, you can manually select or adjust the colors for each term to ensure they accurately represent the products.
Step 5: Save Changes
After customizing your desired color swatch options, be sure to click the Save button to apply your changes.
Once you have completed these steps and saved your settings, your product filter will display the selected color swatch design options. Users will have a visually appealing and interactive way to filter products based on color attributes, enhancing their shopping experience.