我们知道，在WooCommerce中，当用户选择变体后，商品的图片、相册、价格会随之发生改变，很明显，这些变化是通过JS改变页面内容实现的。那么，用户选择变体后，我们是否可以添加一些自定义的变化呢？当然是可以的。

用户选择商品变体后，会触发两个JS实现

• show_variation：当用户选择了所有必需属性并显示最终变体时，将触发此事件。
• woocommerce_variation_select_change：每一次选择变体都会触发此事件。

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

比较有用的是show_variation 事件，使用这个事件时，我们可以使用 variation 这个变体对象来获取变体的数据，来做一些处理，一些可能有用的数据有：variation.variation_id、variation.attributes.attribute_pa_{SLUG}、variation.display_price、variation.image.src， 完整的数据可以直接在浏览器控制台中查看。

添加自定义事件到用户选择商品变体时触发的JS事件上

下面我们来看一个具体的例子，在下面的效果图中，当用户选择商品颜色时，我们需要让商品标题和图片的颜色跟着改变。

这是实现该功能的示例代码：

jQuery( function( $ ) {
	$( '.single_variation_wrap' ).on( 'show_variation', function( event, variation ) {
		if( 'green' === variation.attributes.attribute_pa_color ) {
			$( 'h1.product_title' ).css( { color : '#94c8b7' });
		}
		if( 'red' === variation.attributes.attribute_pa_color ) {
			$( 'h1.product_title' ).css( { color : '#eb846f' });
		}
		if( 'blue' === variation.attributes.attribute_pa_color ) {
			$( 'h1.product_title' ).css( { color : '#9cc2d1' });
		}
	} );
} );

以本文中的原理为基础，我们可以结合业务需求，在用户选择商品变体时，展示用户所选商品的一些自定义数据给用户，让用户更清楚的了解商品。