Field slug in bricks filters instead of field name for attributes

[werus]

It looks like Bricks filters only gets the attribute slug instead of the field name slug. Another taxonomies such as Brands (San Pellegrino, Watter matters,…) prints the field name instead of the slug as expected.

Is there anything that I’m doing wrong or is this a little bug?

Thanks in advance!

[itchycode]

Hi @werus ,

If the product attributes are properly registered in Products > Attributes

Please use Taxonomy

Regards,
Jenn

[werus]

Sure, but doesn’t work with my custom grid made of variation products instead of variable or single products.

First filter (working)
Source: Custom field
Meta key: attribute_pa_sabor

This works well for variations because you’re working directly with the postmeta of the variations, and variations have those values as custom fields (attribute_pa_xxx), which allows you to filter variations directly.

Second filter (failing)
Source: Taxonomy
Taxonomy: pa_volumen (Product volume)

Issue: Variations are not registered as terms of the pa_volumen taxonomy. Even though the attribute is visually assigned from the admin, WooCommerce does not store the taxonomy relationships in wp_term_relationships for variations — it only does so for the parent product.

Therefore, when you use a taxonomy-based filter, you’re querying for products that have that term relationship. But your variations don’t have it, even if they visually appear to use that attribute.

And this is why I have to use custom field.

Cheers!

[itchycode]

Hi @werus ,

If you are trying to filter via “Custom Field” source, Bricks do not know the “label” of your meta values.

The Custom Label mapping options are the only way to do this.

You can configure the mapping like

coco
Replace with
Coco

**I have moved this thread to Feature Request so Bricks can retrieve the product attribute label if detected"

[werus]

Thanks!

In order to help people in the same situation, i did the following:

Create a new API endopoint:

add_action('rest_api_init', function () {
    register_rest_route('acme/v1', '/attribute-labels', [
        'methods'  => 'GET',
        'callback' => function () {
            $taxonomies = get_object_taxonomies('product', 'names');
            $output = [];

            foreach ($taxonomies as $taxonomy) {
                if (strpos($taxonomy, 'pa_') !== 0) {
                    continue; 
                }

                $terms = get_terms([
                    'taxonomy'   => $taxonomy,
                    'hide_empty' => false,
                ]);

                foreach ($terms as $term) {
                    $output[$term->slug] = $term->name;
                }
            }

            return rest_ensure_response($output);
        },
        'permission_callback' => '__return_true',
    ]);
});

And then replace slugs with field name:

fetch('/wp-json/acme/v1/attribute-labels')
  .then(response => response.json())
  .then(replacements => {
    const applyReplacements = () => {
      document.querySelectorAll('span.brx-option-text.bricks-button').forEach(el => {
        const txt = el.textContent.trim();
        if (replacements[txt] && el.innerText !== replacements[txt]) {
          el.innerText = replacements[txt];
        }
      });
    };

    // Aplicar la primera vez al cargar
    applyReplacements();

    // Crear observer pero sin riesgo de bucle
    const observer = new MutationObserver((mutations) => {
      observer.disconnect(); // Detener para evitar loops

      // Solo si hay cambios relevantes
      let hasRelevantChange = mutations.some(m =>
        m.addedNodes.length || m.removedNodes.length
      );

      if (hasRelevantChange) {
        applyReplacements();
      }

      observer.observe(document.body, {
        childList: true,
        subtree: true
      }); 
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  })
  .catch(err => {
    console.warn('⚠️ ', err);
  });

Cheers!