Dynamic AJAX Product Filters for WooCommerce allows you to display product attribute terms as color swatches instead of standard checkbox or dropdown filters. This is especially useful for stores that sell products with color-based variations, such as clothing, accessories, furniture, cosmetics, or décor items.
You can now customize color swatches using:
- Single solid colors
- Gradient color swatches
- Image-based color swatches
This gives you more flexibility when displaying complex colors, patterns, textures, and multi-color product options.
Where to Find Color Swatch Settings
To customize color swatches:
- Go to your WordPress Dashboard.
- Navigate to Product Filters → Form Style.
- Find the attribute you want to customize, such as Color.
- Select Color as the display style for that attribute.
- Configure the color, gradient, or image swatch options.
- Click Save Changes.
Single Color Swatches
Single color swatches are used when each attribute term represents one solid color.
For example:
| Attribute Term | Swatch Type |
|---|---|
| Red | Solid red color |
| Blue | Solid blue color |
| Black | Solid black color |
| White | Solid white color |
This is the best option when your product colors are simple and can be represented with one color.
Example Use Cases
Use single color swatches for:
- Basic clothing colors
- Shoes
- Bags
- Accessories
- Simple product color variations
Gradient Color Swatches
Gradient color swatches allow you to display a smooth transition between colors.
This is useful for products that have blended, ombré, metallic, rainbow, or multi-tone finishes.
Examples:
| Attribute Term | Recommended Swatch |
|---|---|
| Rainbow | Gradient swatch |
| Ombré Pink | Gradient swatch |
| Sunset | Gradient swatch |
| Metallic Gold | Gradient-style swatch |
| Blue Fade | Gradient swatch |
Gradient swatches are useful when a single flat color or two-color split does not accurately represent the product option.
Image as Color Swatch
The plugin also supports using an image as a color swatch.
This is helpful when the product option is not a simple color but a texture, pattern, fabric, print, or material.
For example:
| Attribute Term | Image Swatch Example |
|---|---|
| Floral | Floral pattern image |
| Denim | Denim texture image |
| Marble | Marble texture image |
| Wood | Wood texture image |
| Leather | Leather texture image |
| Camo | Camouflage pattern image |
Image swatches give customers a more accurate preview of the product option.
When to Use Image Swatches
Use image-based swatches when the option cannot be represented properly with a solid color or gradient.
Image swatches are recommended for:
- Fabric patterns
- Printed designs
- Wood textures
- Marble textures
- Leather materials
- Metallic finishes
- Multi-color patterns
- Product-specific designs
Color Swatch Configuration Examples
Example 1: Simple Color Attribute
For a standard clothing store, you may configure the Color attribute like this:
| Term | Swatch Type |
|---|---|
| Red | Solid color |
| Blue | Solid color |
| Black | Solid color |
| White | Solid color |
Example 2: Pattern-Based Attribute
For products with patterns or materials:
| Term | Swatch Type |
|---|---|
| Floral | Image swatch |
| Denim | Image swatch |
| Marble | Image swatch |
| Leather | Image swatch |
Example 3: Gradient-Based Attribute
For blended colors:
| Term | Swatch Type |
|---|---|
| Rainbow | Gradient swatch |
| Sunset | Gradient swatch |
| Blue Fade | Gradient swatch |
| Pink Ombré | Gradient swatch |
Best Practices for Color Swatches
Use solid color swatches for simple colors.
Use gradient swatches for blended or fade-style color options.
Use image swatches for textures, patterns, fabric, and materials.
Keep swatch images clear and consistent in size.
Use meaningful attribute term names so customers understand each option.
Avoid using very similar colors without clear labels, because customers may not be able to tell them apart easily.
Recommended Image Swatch Size
For best results, use small square images with a clear pattern or texture.
Recommended image format:
Square image
Clear texture or pattern
Optimized file size
Consistent image dimensions
Avoid very large image files because they may slow down the filter display.
Troubleshooting
Color swatches are not showing
Make sure the attribute display style is set to Color from Product Filters → Form Style.
Also check that the filter attribute is enabled from Product Filters → Form Manage.
Click on the gear icon and check if the color attribute is selected or not.
- If selected, the color attribute will not show on the filter.
- If not selected, the color attribute will show on the filter.
Gradient swatch is not showing
Make sure the gradient value is valid and saved correctly.
If the gradient is empty or invalid, the plugin may fall back to the normal color value.
Image swatch is not showing
Check that the image URL or uploaded image is valid.
Also make sure the image file is accessible from the frontend of your website.
Swatches look different on mobile
Check your theme CSS. Some themes may override filter item width, height, border radius, or spacing.
You may need to adjust your filter style settings or add custom CSS.
Summary
Color swatches help customers filter products visually instead of reading long lists of color names.
Dynamic AJAX Product Filters for WooCommerce supports:
Solid color swatches
Gradient color swatches
Image-based color swatches
Use the correct swatch type based on your product options. Solid colors work best for simple colors work best for dual-color products, gradients work best for blended colors, and image swatches work best for patterns, textures, and materials.