Requisitando o id de uma variação de um produto no WooCommerce

O WooCommerce é o plugin mais popular de ecommerce para o WordPress, com mais 5 milhões de instalações ativas. Ele é gratuito, flexível e o seu core é mantido open-source pela Automattic (mesma empresa dona do wordpress.com e de plugins como: Akismet e bbPress).

É muito comum que durante o desenvolvimento de projetos de comércios eletrônicos no WooCommerce surja a necessidade de manipular dados de: produtos, taxonomias ou componentes de um comércio eletrônico: como o carrinho e simuladores de frete.

Nesse artigo quero mostrar como pode ser feita uma requisição usando o Ajax do jQuery para buscar o ID de uma variação de produto utilizando as combinações de ID do produto e o(s) nome(s) do(s) atributo(s) da variação.

var attributes = {}, 
    variation_id = 0;

    attributes.product_id = 2406;
    attributes['attribute_NAME'] = 'Nome do atributo';
    attributes['attribute_NAME'] = 'Nome do atributo';// opcional
    attributes['attribute_NAME'] = 'Nome do atributo';// opcional
    // outros atributos da variação...
    jQuery.ajax({
        //url: wc_add_to_cart_variation_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_variation'),
// O objeto wc_add_to_cart_variation_params só existe na página do produto com a variação, se você for fazer isso a partir de outra parte pode usar a URL abaixo
        url: '/BASE_URL_WOOCOMMERCE/?wc-ajax=get_variation',
        type: 'POST',
        data: attributes,
        success: function (variation) {
                variation_id = variation.variation_id;
                //Do something with variation data
        },
        complete: function () {
            console.log('O valor da variação é: '+variation_id)
        }
    });
  

Código baseado no: https://github.com/woocommerce/woocommerce/blob/683296f2dc17eca28ad41990839c7b0ee5f5f5bd/assets/js/frontend/add-to-cart-variation.js

O código é bem simples, as únicas coisas que normalmente desconhecemos são os endpoints/actions para fazer requisições e a formatação da requisição. Nesse caso o endpoint é o /?wc-ajax=get_variation e a formatação do corpo da request pode ser vista no objeto attributes.