Documentation / Brands and Color swatches

Brands and Color swatches

Some filters look more visual if they contain images or color swatches. These can be, for example, filters by Brands or by Color. The Filter Everything plugin in both its Free and PRO versions supports the use of images and color swatches. Both – in combination with plugins such as Perfect Brands for WooCommerce, Yith Brands for WooCommerce, Color Swatches for WooCommerce, and also independently without any third-party plugins.

Examples

Color swatches

To enable Color swatches support, please go to Filters -> Settings -> Experimental and enable Color swatches for Filters. In the field that appears, select the taxonomies that should support swatches. After that, you can add your images and colors to the terms of the selected taxonomies. To do this, open the desired term in editing mode and add an image or color.

Example of a term edit screen with controls to add Swatch Image or Color.

Note:If you add both at the same time, the image only will be displayed because it has higher priority.

Create a filter with a taxonomy in which you have added images or colors. Select the desired filter view. Each of them (Checkboxes, Radio buttons, Labels, Dropdowns) supports the display of swatches and even a Dropdown if the «Use improved dropdowns instead of regular ones (jQuery plugin Select2)» option is enabled in Filters -> Settings -> Experimental.

For filters with Color swatches or Brands, you can hide term names to leave only the image or color.

Brands

Brand images are displayed automatically if they are created using the YITH WooCommerce Brands Add-On or Perfect Brands for WooCommerce plugins or using the ACF image field for taxonomy. Also, via hooks, you can display Brand images, if they were created with custom code or in another way.

If for some reason you need to disable the display of Brand images in a filter, please use the hooks below.
 

Image sizes

By default, the image sizes are 25 x 25 pixels for Color swatches and 70 x 40 pixels for Brand images. You can change these dimensions to your own using the wpc_swatches_width_height and wpc_brands_width_height hooks.

 

Brand taxonomies

Using the wpc_brand_filter_entities hook, you can change the list of taxonomies for which Brands are supported. You can both delete existing ones and add new ones.

apply_filters( 'wpc_brand_filter_entities', ['pa_brand', 'pwb-brand', 'yith_product_brand'] );

Parameters

  • $taxonomies (array) taxonomies that support Brands

Examples

Disable the display Brand images at all

add_filter( 'wpc_brand_filter_entities', '__return_empty_array' );

 

Image term meta key

The wpc_image_term_meta_key hook allows you to change the meta key for the taxonomy term that stores an image ID. This can be relevant in a situation where you already have terms containing image IDs and need to display them in filters.

$image_key = apply_filters( 'wpc_image_term_meta_key', $image_key, $filter );

Parameters

  • $image_key (string) image meta key value
  • $filter (array) filter array with properties

 

Color term meta key

You can also change the meta key for colors stored in terms with hook wpc_color_term_meta_key

$color_key = apply_filters( 'wpc_color_term_meta_key', $color_key, $filter );

Parameters

  • $color_key (string) color meta key value
  • $filter (array) filter array with properties

 

Image dimensions

The wpc_swatches_width_height hook allows you to change Color swatches dimensions

apply_filters( 'wpc_swatches_width_height', [ 'width' => 25, 'height' => 25 ] );

Parameters

  • $dimensions (array) width and height values in px

A similar hook for the size of Brand images is wpc_brands_width_height

apply_filters( 'wpc_brands_width_height', [ 'width' => 70, 'height' => 40 ] );

Parameters

  • $dimensions (array) width and height values in px

Make your filtering best with