[WooCommerce] Lista variações de COR do produto e altera a imagem do mesmo de acordo com a variação

woocommerce_list_color_variations_loop.php

<?php
    if ( $product->is_type( 'variable' ) ) :
        $url = get_the_permalink();
        $available_variations = $product->get_available_variations();
        $count = count( $available_variations );
        echo '<ul class="colors">';
        for ( $i=0; $i < $count; $i++ ) {
            $var_color_name = $available_variations[$i]['attributes']['attribute_pa_cor'];
            $var_img = $available_variations[$i]['image_src'];
            echo '<li>';
            /*
             * Link direto para a variação do produto usando o plugin WooCommerce Direct Variation Link
             * https://wordpress.org/plugins/woocommerce-direct-variation-link/
             */
            echo '<span data-href="' . $url . '?cor=' . $var_color_name . '" data-img="' . $var_img . '" class="color ' . $var_color_name . '">' . $var_color_name . '</span>';
            echo '</li>';
        }
        echo '</ul>';
    ?>
    <script>
    (function($) {
        var colorsList = $('.colors'),
            colorVar = colorsList.find('.color');

        $(function() {
            colorVar.hover(function() {
                var img = $(this).data('img'),
                    productThumb = $(this).parent().parent().siblings('.wp-post-image');
                productThumb.attr('src', img);
            });
        });
    })(jQuery);
    </script>
    <?php
        // exibe array com informações das variações disponíveis
        // echo '<pre>';
        // print_r( $available_variations );
        // echo '</pre>';
    endif;
?>