Adding images to filter values

FiboFilters allows you to add images to filter values, enhancing the appearance and usability of your filters. This feature works only for “Checkboxes” and “Radio” filter types.

To display images next to filter labels, use the fibofilters/front/filter/get_data/url_slug=<URL slug> hook:

add_filter( 'fibofilters/front/filter/get_data/url_slug=material', function ( $data ) {
	if ( ! empty( $data['values'] ) ) {
		foreach ( $data['values'] as $index => $value ) {
			$data['values'][$index]['label_image'] = "https://example.com/image";
			$data['values'][$index]['label_image_position'] = 'before-label';
		}
	}
	return $data;
} );

ⓘLearn how to add this snippet to your WordPress.

Replace material in the hook name with your filter URL slug. The slug can be found in filter details:

label_image is the image URL
label_image_position is the position relative to the label. It can be set to either after-label or before-label. If you don’t set it, it will default to before-label.

Examples

Category images

The following example will display category thumbnails next to filter labels. First, you need to set category thumbnails in Products > Categories:

Once this is done, the following code will make FiboFilters display the images in the filters:

add_filter( 'fibofilters/front/filter/get_data/url_slug=categories', function ( $data ) {
	if ( ! empty( $data['values'] ) ) {
		foreach ( $data['values'] as $index => $value ) {
			$thumbnail_id = get_term_meta( $value['value'], 'thumbnail_id', true ); 
			$image = wp_get_attachment_url( $thumbnail_id );
			$data['values'][$index]['label_image'] = $image;
			$data['values'][$index]['label_image_position'] = 'before-label';
		}
	}
	return $data;
} );

ⓘLearn how to add this snippet to your WordPress.

The above code will have the following effect:

Brand images

The following example will display WooCommerce brand thumbnails next to filter labels. First, you need to set brand thumbnails in Products > Brands:

Once this is done, the following code will make FiboFilters display the images in the filters:

add_filter( 'fibofilters/front/filter/get_data/url_slug=brands', function ( $data ) {
    if ( ! empty( $data['values'] ) ) {
        foreach ( $data['values'] as $index => $value ) {
            $thumbnail_id = get_term_meta( $value['value'], 'thumbnail_id', true ); 
            $image = wp_get_attachment_url( $thumbnail_id );
            $data['values'][$index]['label_image'] = $image;
            $data['values'][$index]['label_image_position'] = 'after-label';
        }
    }
    return $data;
} );

ⓘLearn how to add this snippet to your WordPress.

Here’s the effect: