7

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": ""
}]"
0
  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 )
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.