Graphql to get Product Attributes Swatch type and values

Any solution for this please?

On analysis I see that the product attribute types (button, color) are stored in wp_woocommerce_attribute_taxonomies table, and the actual color hex code etc for attribute term what we save with this plugin are stored in term_meta (wp_termmeta table).

How to get the values of this via graphql when we are listing a product attribute, I believe attribute term values may have meta {key:value} ex. {pa_color: #333, } also in response to get this (also the {type: button/color}).

Can you please suggest if it supported by plugin? Or otherwise a piece of code to get that extended data along with attribute values in graphql?

I believe its not a big thing to add or suggest if not already, but its very important thing.
Otherwise this plugin will be of no use for headless wordpress/woocommerce.

Will await for response.

Hi,

Thanks for reaching out to us. I have sent your request to our development team. If you have any findings or sample code to implement the endpoint of GraphQL, you can share it with me. I can also forward that to our development team.

Thank You

Thanks for responding @fizanzvai . I do not have exact code but mainly a combination of following functions may be needed to register and fetch fields in graphql, ie.

 $product->get_attributes();
$attribute->get_variation(); 
$attribute->get_taxonomy();
$attribute->get_terms();
$attributes = wc_get_attribute_taxonomies();
get_term_meta($term->term_id, 'color', TRUE); // 'color' can be any dynamic attribute: size, memory, style as created 
wc_attribute_label($taxonomy) 
register_graphql_field() to register values via graphql_register_types hook

Here few links that may help:

https://stackoverflow.com/questions/76564077/querying-custom-term-meta-field-using-wpgraphql-returns-an-empty-field-for-that

https://stackoverflow.com/questions/77825394/how-to-display-woocommerce-product-attributes-term-names-as-linked-terms

https://master–wpgraphql-docs.netlify.app/getting-started/custom-fields-and-meta/

https://github.com/wp-graphql/wp-graphql-meta-query

Also you will be surprised to know that this issue was asked around 4 years ago! But solution says to use ACF plugin instead of Variation Swatches for WooCommerce Plugin, so its easy to understand that its incompleteness since then is driving away the people from this plugin, see: https://stackoverflow.com/questions/60496743/how-to-get-term-meta-wpgraphql-woographql

Please share this info with your dev team. Hope we will get solution asap.

Hi,

The following functions/methods you mentioned are from WooCommerce core. Did you try this https://github.com/wp-graphql/wp-graphql-woocommerce to get the following values?

$product->get_attributes();
$attribute->get_variation(); 
$attribute->get_taxonomy();
$attribute->get_terms();
$attributes = wc_get_attribute_taxonomies();

Hope to hear from you soon.

Thank You

Hii @fizanzvai , as you asked for some sample code or my findings over this which you can pass that to your development team as input, so I given you few functions and links I found through my research which could be used.

Obviously I have already installed wp-graphql-woocommerce plugin along with wpgraphql , and that’s how I was able to fetch the product and its variations in first place, as mentioned the graphql request and response as example in start of this thread.

But the wpgraphql + woographql only returns the data of attributes which are default like name (eg. pa_color) and value (ex. red), but not gives your plugin’s custom attrbiute/term data and term meta like color hex code , attribute type: color/button/image values as this plugin doesn’t register these fields with graphql.

So, its for “Variation Swatches for WooCommerce” plugin need to do , to register its custom attribute term type and values with graphql (bcoz this plugin creates it and saves in the tables I mentioned before).

The functions I suggested are standard functions which can give those values, but where exactly need to write in what way in your plugin is something your dev team will better know, while registering those graphql fields and writing resolver to get those values using one or more of these functions.

Hope it will be available soon.

• This reply was modified 6 months, 3 weeks ago by Shashank Shekhar.

In my case to got the attribute value of a specific product Id, I create this graphql field that I integrate on my wordpress code

<?php
// Add this to your theme's functions.php or a custom plugin file

add_action('graphql_register_types', 'register_product_attributes_with_swatches_field');

function register_product_attributes_with_swatches_field() {
    register_graphql_field('Product', 'attributesWithSwatches', [
        'type' => ['list_of' => 'ProductAttributeWithSwatch'],
        'description' => __('Product attributes with swatch information', 'your-textdomain'),
        'resolve' => function($product) {
            $attributes = $product->get_attributes();
            $result = [];

            foreach ($attributes as $attribute) {
                if ($attribute->get_variation()) {
                    $terms = $attribute->get_terms();
                    $attribute_data = [
                        'name' => $attribute->get_name(),
                        'label' => wc_attribute_label($attribute->get_name()),
                        'options' => []
                    ];

                    $attribute_id = wc_attribute_taxonomy_id_by_name($attribute->get_name());
                    $attribute_object = woo_variation_swatches()->get_frontend()->get_attribute_taxonomy_by_id($attribute_id);
                    $attribute_type = sanitize_text_field($attribute_object->attribute_type);

                    foreach ($terms as $term) {
                        $term_id = $term->term_id;
                        
                        $primary_color = sanitize_hex_color(get_term_meta($term_id, 'product_attribute_color', true));
                        $secondary_color = sanitize_hex_color(get_term_meta($term_id, 'secondary_color', true));
                        $is_dual_color = wc_string_to_bool(get_term_meta($term_id, 'is_dual_color', true));
                        $dual_color_angle = woo_variation_swatches()->get_frontend()->get_dual_color_gradient_angle();
                        
                        $image_id = absint(get_term_meta($term_id, 'product_attribute_image', true));
                        $image_size = sanitize_text_field(woo_variation_swatches()->get_option('attribute_image_size', 'variation_swatches_image_size'));
                        
                        $show_tooltip = sanitize_text_field(get_term_meta($term_id, 'show_tooltip', true));
                        $tooltip_text = sanitize_text_field(get_term_meta($term_id, 'tooltip_text', true));
                        $tooltip_image_id = absint(get_term_meta($term_id, 'tooltip_image_id', true));
                        
                        $group = '';
                        $group_name = '';
                        if (woo_variation_swatches()->is_pro()) {
                            $group = sanitize_text_field(get_term_meta($term_id, 'group_name', true));
                            $group_name = sanitize_text_field(woo_variation_swatches_pro()->get_backend()->get_group()->get($group));
                        }

                        $option = [
                            'term_id' => $term_id,
                            'name' => $term->name,
                            'slug' => $term->slug,
                            'attribute_type' => $attribute_type,
                            'primary_color' => $primary_color,
                            'secondary_color' => $secondary_color,
                            'is_dual_color' => $is_dual_color,
                            'dual_color_angle' => $dual_color_angle,
                            'image_id' => $image_id,
                            'image_size' => $image_size,
                            'group' => $group,
                            'group_name' => $group_name,
                            'show_tooltip' => $show_tooltip,
                            'tooltip_text' => $tooltip_text,
                            'tooltip_image_id' => $tooltip_image_id,
                        ];

                        $attribute_data['options'][] = $option;
                    }

                    $result[] = $attribute_data;
                }
            }

            return $result;
        }
    ]);

    register_graphql_object_type('ProductAttributeWithSwatch', [
        'fields' => [
            'name' => ['type' => 'String'],
            'label' => ['type' => 'String'],
            'options' => ['type' => ['list_of' => 'ProductAttributeOption']],
        ]
    ]);

    register_graphql_object_type('ProductAttributeOption', [
        'fields' => [
            'term_id' => ['type' => 'Int'],
            'name' => ['type' => 'String'],
            'slug' => ['type' => 'String'],
            'attribute_type' => ['type' => 'String'],
            'primary_color' => ['type' => 'String'],
            'secondary_color' => ['type' => 'String'],
            'is_dual_color' => ['type' => 'Boolean'],
            'dual_color_angle' => ['type' => 'String'],
            'image_id' => ['type' => 'Int'],
            'image_size' => ['type' => 'String'],
            'group' => ['type' => 'String'],
            'group_name' => ['type' => 'String'],
            'show_tooltip' => ['type' => 'String'],
            'tooltip_text' => ['type' => 'String'],
            'tooltip_image_id' => ['type' => 'Int'],
        ]
    ]);
}

And that how I’m using it on my graphql schema

export const GET_WOOCOMMERCE_PRODUCT_BY_ID = gql<br>  query GetWooCommerceProductById($id: ID!) {<br>    product(id: $id) {<br>      id<br>      databaseId<br>      name<br>      slug<br>      description<br>      shortDescription<br>      onSale<br>      type<br>      image {<br>        sourceUrl<br>        altText<br>      }<br>      attributesWithSwatches {<br>        name<br>        label<br>        options {<br>          term_id<br>          name<br>          slug<br>          attribute_type<br>          primary_color<br>          secondary_color<br>          is_dual_color<br>          dual_color_angle<br>          image_id<br>          image_size<br>          group<br>          group_name<br>          show_tooltip<br>          tooltip_text<br>          tooltip_image_id<br>        }<br>      }<br>      galleryImages {<br>        nodes {<br>          sourceUrl<br>          altText<br>        }<br>      }<br>      ... on SimpleProduct {<br>        price<br>        regularPrice<br>        salePrice<br>        stockStatus<br>        stockQuantity<br>        sku<br>      }<br>      ... on VariableProduct {<br>        price<br>        regularPrice<br>        salePrice<br>        stockStatus<br>        stockQuantity<br>        variations {<br>          nodes {<br>            id<br>            databaseId<br>            name<br>            price<br>            regularPrice<br>            salePrice<br>            stockStatus<br>            stockQuantity<br>            sku<br>            attributes {<br>              nodes {<br>                name<br>                value<br>              }<br>            }<br>          }<br>        }<br>        attributes {<br>          nodes {<br>            name<br>            options<br>            variation<br>            id<br>          }<br>        }<br>      }<br>      ... on ExternalProduct {<br>        price<br>        regularPrice<br>        salePrice<br>        externalUrl<br>        buttonText<br>      }<br>      ... on GroupProduct {<br>        products {<br>          nodes {<br>            ... on SimpleProduct {<br>              id<br>              databaseId<br>              name<br>              price<br>              regularPrice<br>              salePrice<br>            }<br>          }<br>        }<br>      }<br>      productCategories {<br>        nodes {<br>          id<br>          databaseId<br>          name<br>          slug<br>        }<br>      }<br>      productTags {<br>        nodes {<br>          id<br>          name<br>          slug<br>        }<br>      }<br>    }<br>  }<br>;