Color & Image Swatches

Displaying the filter options using color/image swatches is a Pro feature.

You can enhance the visual appeal of your filter options by displaying them using color or image swatches. The swatches can be enabled for the “Checkbox,” “Radio,” and “Label” display types.

To enable swatches, follow these steps:

  1. Go to the filter settings for the desired display type.
  2. Enable the “Enable swatches” option.
  3. Set the “Swatch type” field to either “Color” or “Image”.
  4. Optionally, enable the “Swatch with label” setting to display the label alongside the swatches.

There are two methods for configuring the swatch data:

Method 1: Automatic retrieval from term meta

If you are using a supported variation swatches plugin, the swatch data for each term can be obtained from the term meta data. The color swatch data includes the primary color and, if available, the secondary color. For image swatches, the data includes the image ID.

Method 2: Manual configuration

If you prefer to manually configure the swatch data, follow these steps:

  1. In the filter settings, navigate to the “Options” tab.
  2. Set the value of the “Get Options” field to “Manual Entry”.
  3. Click on the “Browse Options” button.
  4. Select the terms you want to include as filter options and click “Add Options”.
  5. In the “Filter Options” table, customize the label and tooltip for each term, if desired.
  6. In the “Color / Image Swatch” column, set the colors or images for each option.

Please note that if you select “Color” as the “Swatch type”, the plugin will prioritize the color value and display the image only if the color is not available, and vice versa.

Hooks for automatic swatch data retrieval

You can use the following hooks to retrieve the swatch data automatically from the term meta:

  1. wcapf_swatch_term_color_meta_key: Use this hook to define the meta key for retrieving the primary color from the term meta. Here’s an example of how to use the hook:
function wcapf_swatch_term_color_meta_key($meta_key, $taxonomy) {
    // Set the meta key based on the taxonomy, if needed.
    return '_color';
}
add_action('wcapf_swatch_term_color_meta_key', 'wcapf_swatch_term_color_meta_key', 10, 2);
  1. wcapf_swatch_term_image_meta_key: Use this hook to define the meta key for retrieving the image ID from the term meta. Here’s an example of how to use the hook:
function wcapf_swatch_term_image_meta_key($meta_key, $taxonomy) {
    // Set the meta key based on the taxonomy, if needed.
    return '_image';
}
add_action('wcapf_swatch_term_image_meta_key', 'wcapf_swatch_term_image_meta_key', 10, 2);

Feel free to customize the meta key values according to your specific requirements and taxonomies.

There are two more hooks that you can use if you wish.

  1. wcapf_swatch_term_secondary_color_enabled_meta_key: Use this hook to define the meta key that determines whether the secondary color is enabled.
  2. wcapf_swatch_term_secondary_color_meta_key: Use this hook to define the meta key for retrieving the secondary color from the term meta.

By utilizing these hooks, you can ensure that the swatch data is automatically retrieved from the term meta.

Was this page helpful?