How to pass/get data to/from the WooCommerce data-product_variations object?

Question

What is the best way to pass/get data to/from the data-product_variations attr form in Product Single pages. I am working on some interactions with the product gallery images and the product variations, all of these while using WooCommerce.

Basically, I need to be able to trigger some stuff on the woocommerce_variation_has_changed event.

I have been able to pass and get my data attributes while hooking to single_product_large_thumbnail_size and woocommerce_single_product_image_thumbnail_html.

I have not been able to pass/get that data during the woocommerce_variation_has_changed event. What I have understood (?) is that the woocommerce_variation_has_changed trigger gets its data from the data-product_variations object to insert the product variation related image markup.

Summing it up, how would I go to add data attr’s to the data-product_variations object? And what would be the best way to get that data during the woocommerce_variation_has_changed event?

This is how the object inside the data-product_variations looks like. Basically I need to be able to pass a data-attr to the featured image tag when woocommerce_variation_has_changed kicks in.

data-product_variations="[{
    "variation_id": 373,
    "variation_is_visible": true,
    "variation_is_active": true,
    "is_purchasable": true,
    "display_price": 100,
    "display_regular_price": 100,
    "attributes": {
        "attribute_pa_chain-length": "80cm"
    },
    "image_src": "",
    "image_link": "",
    "image_title": "",
    "image_alt": "",
    "image_caption": "",
    "image_srcset": "",
    "image_sizes": "",
    "price_html": "<span class=\"price\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&pound;<\/span>100.00<\/span><\/span>",
    "availability_html": "",
    "sku": "",
    "weight": " kg",
    "dimensions": "",
    "min_qty": 1,
    "max_qty": null,
    "backorders_allowed": false,
    "is_in_stock": true,
    "is_downloadable": false,
    "is_virtual": false,
    "is_sold_individually": "no",
    "variation_description": ""
}]"

Answer 1

  jQuery(document).on('found_variation.wc-variation-form', 'form.variations_form', function(event, variation_data) {
    //this is called when a valid productis found
  });
  jQuery(document).on('change.wc-variation-form', 'form.variations_form', function(event) {
    //this function is called when the user clicks or changes the dropdown
  });

The PHP function you are looking for is

apply_filters(
        'woocommerce_available_variation',
        array(
            'attributes'            => $variation->get_variation_attributes(),
            'availability_html'     => wc_get_stock_html( $variation ),
            'backorders_allowed'    => $variation->backorders_allowed(),
            'dimensions'            => $variation->get_dimensions( false ),
            'dimensions_html'       => wc_format_dimensions( $variation->get_dimensions( false ) ),
            'display_price'         => wc_get_price_to_display( $variation ),
            'display_regular_price' => wc_get_price_to_display( $variation, array( 'price' => $variation->get_regular_price() ) ),
            'image'                 => wc_get_product_attachment_props( $variation->get_image_id() ),
            'image_id'              => $variation->get_image_id(),
            'is_downloadable'       => $variation->is_downloadable(),
            'is_in_stock'           => $variation->is_in_stock(),
            'is_purchasable'        => $variation->is_purchasable(),
            'is_sold_individually'  => $variation->is_sold_individually() ? 'yes' : 'no',
            'is_virtual'            => $variation->is_virtual(),
            'max_qty'               => 0 < $variation->get_max_purchase_quantity() ? $variation->get_max_purchase_quantity() : '',
            'min_qty'               => $variation->get_min_purchase_quantity(),
            'price_html'            => $show_variation_price ? '<span class="price">' . $variation->get_price_html() . '</span>' : '',
            'sku'                   => $variation->get_sku(),
            'variation_description' => wc_format_content( $variation->get_description() ),
            'variation_id'          => $variation->get_id(),
            'variation_is_active'   => $variation->variation_is_active(),
            'variation_is_visible'  => $variation->variation_is_visible(),
            'weight'                => $variation->get_weight(),
            'weight_html'           => wc_format_weight( $variation->get_weight() ),
        ),
        $this,
        $variation
    );

This is found here https://github.com/woocommerce/woocommerce/blob/master/includes/class-wc-product-variable.php#L325

WC_Product_Variable -> get_available_variation( $variation )

Answer 2

Sorry to be late to the party, but I needed something similar today. This is how I managed to get around it (probably not the most logical and efficient way).

Firstly, you wouldn't want to use the woocommerce_variation_has_changed event, you'd need the show_variation as you can use the variation object there on a successful variation match. See this answer for more information.

As for adding data to the variation object, you can use the woocommerce_available_variation filter.

add_filter( 'woocommerce_available_variation', 'add_variation_data', 10, 3 );
function add_variation_data( $array, $instance, $variation ){
    $array['custom_data_key'] = get_post_meta( $array['variation_id'], '_meta_key', true );
    return $array;
}

This will now show inside the variation object when calling the show_variation event.

Hope this helps.