Menu Close

Blocksify Pro Docs

Add a custom swatch source

Blocksify Pro lets developers connect Loop Filter swatches to taxonomy colour or image data stored by custom code or another plugin.

Before you start: Use a taxonomy whose terms already have colour or image values in storage that Blocksify Pro does not read by default. For product attributes, complete Filter WooCommerce products first. The example uses property_type and three term-meta keys.

What a swatch resolver does

The Blocksify Pro hooks reference lists the registration filter. A resolver has three entries. claims receives a taxonomy slug; resolve receives all term IDs for one facet plus that slug; and priority defaults to 10, with lower numbers winning and ties keeping registration order. Built-in priorities are YaySwatches at 10, the shared WooCommerce attribute convention at 20, and WooCommerce core visual attributes at 30.

Each resolved term uses type color, image, or label with a value. A colour may add value2 for a split chip; any type may add alt. Omit a term that has no usable value; Blocksify Pro falls back to its label.

1. Create the must-use plugin

  1. Create wp-content/mu-plugins/property-type-swatches.php. Create the mu-plugins directory first if it does not exist.
  2. Add the complete example below, then change the taxonomy and meta keys to match your site.

Register the property-type swatch resolver.

<?php
/**
 * Plugin Name: Property Type Loop Filter Swatches
 */

add_filter( 'blocksify_lf_swatch_resolvers', function ( $resolvers ) {
    $resolvers['site/property-type'] = array(
        'priority' => 15,
        'claims'   => static function ( $taxonomy ) {
            return 'property_type' === $taxonomy;
        },
        'resolve'  => static function ( $term_ids, $taxonomy ) {
            $term_ids = array_map( 'absint', (array) $term_ids );
            update_meta_cache( 'term', $term_ids );
            $resolved = array();

            foreach ( $term_ids as $term_id ) {
                $image_id = absint( get_term_meta( $term_id, '_listing_swatch_image', true ) );
                $image_url = $image_id ? wp_get_attachment_image_url( $image_id, 'thumbnail' ) : '';

                if ( $image_url ) {
                    $term = get_term( $term_id, $taxonomy );
                    $resolved[ $term_id ] = array(
                        'type'  => 'image',
                        'value' => $image_url,
                        'alt'   => $term && ! is_wp_error( $term ) ? $term->name : '',
                    );
                    continue;
                }

                $color = sanitize_hex_color( get_term_meta( $term_id, '_listing_swatch_color', true ) );
                if ( $color ) {
                    $resolved[ $term_id ] = array(
                        'type'   => 'color',
                        'value'  => $color,
                        'value2' => sanitize_hex_color( get_term_meta( $term_id, '_listing_swatch_color_2', true ) ),
                    );
                }
            }

            return $resolved;
        },
    );

    return $resolvers;
} );

The batch call to update_meta_cache() follows the built-in model and avoids one database query per term. Blocksify Pro sanitizes returned colours and image URLs again before rendering.

2. Test the source in the editor

  1. Add valid values to the example meta keys on several Property type terms.
  2. Select the Loop Filter, add a Property type taxonomy facet, and open its Display tab.
  3. Select Swatches. The option appears because the resolver claims property_type.
  4. Click Update, open the page, and confirm colour, split-colour, image, and label-fallback chips.

If Swatches is absent, confirm the taxonomy slug and that this must-use plugin loads. If another source claims the same taxonomy first, lower this resolver’s priority number deliberately.

Was this helpful?

0

Updated