Sarathlal N

Get variation product data on selecting variation options - WooCommerce

In one of my recent WooCommerce project, I have to show some custom message on variation selection in product detail page as per selected variation.

I have checked few options and finally find out some interesting jQuery events in WooCommerce add-to-cart-variation.js. The WooCommerce provides triggers throughout the add-to-cart-variation.js which allows us to hook into change events.

Below you can find two jQuery events that fire after user select a variation using drop down options. The details about the variation is also available as an object.

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
	alert( variation.variation_id );
	console.log( variation );
} );


$( document ).on( "found_variation.first", function ( e, v ) {
	alert( v.variation_id );
	console.log( v );
} );

Just check your console and you can see whole data like variation price, image, stock status etc.

Additionally, if you have to do some on variation option selection, use below event.

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
	alert( "Options changed" );
} );

The woocommerce_variation_select_change Fires when the select is changed.

Need Help?

Do you need any help on WordPress & WooCommerce? I'm happy to help you.

Contact Now

Fill the form & submit your query. I will get back to you soon.



Recent Posts

  1. Unzip zip file using PHP
  2. Handle custom form in WordPress
  3. Disable single page view & archive page view of Custom Post Type - WordPress
  4. Add TinyMCE WYSIWYG (Rich text area) meta box - WordPress
  5. Reorder product tabs in single product page - WooCommerce

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about them, please get in touch.