WP ecommerce – How do I change the product image for each product variation?

I hope this isn’t too late..

I was also looking for this a bit back and found the following on the internet, can’t remember where…

I have purchased the gold cart option, but I’m not sure if it’s a prereq for this to work..

in your theme header file, add the following:

    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('.wpsc_select_variation').change(function() {
                var pid = $(this).val();
                pimg = 'img.product_image_'+pid;
                $('img.product_image').attr("src",$(pimg).attr('src'));
            });


            $(".product_image_variation").bind("click", function() {
                $('img.product_image').attr("src",$(this).attr('src'));
                var className = $($(this)).attr('class');
                $('.wpsc_select_variation').val(className.substring((className.lastIndexOf('_')+1))).change();

            });
        });
    </script>

then in the store->presentation screen, choose to copy the wpsc-single-product-page to your theme.
Edit the file and add the following block of code which should give an image for each variation:

      <?php /** My variation stuff */ ?>
      <div id="variation-colours">
        <?php if (wpsc_have_variation_groups()) { ?>
          <?php while (wpsc_have_variation_groups()) : wpsc_the_variation_group(); ?>
            <?php /** the variation HTML and loop */ ?>
            <?php $skipone = true; ?>
            <?php while (wpsc_have_variations()) : wpsc_the_variation(); ?>
              <?php
              $isox = get_term_by('id', wpsc_the_variation_id(), 'wpsc-variation');
              $slugslug = basename(get_permalink()) . '-' . $isox->slug;
              $isox->ID;
              $variation_subs = get_children(array(
                  'post_parent' => wpsc_the_product_id()
                      ));
              foreach ($variation_subs as $variationss) {
                if ($variationss->post_name == $slugslug) {
                  $attached_images = get_children(array(
                      'post_parent' => $variationss->ID,
                      'order' => 'ASC'
                          ));
                  foreach ($attached_images as $image) {
                    $image = array(
                        'URL' => $image->guid,
                        'title' => $image->post_title,
                    );
                  }
                }
              }
              ?>
              <?php if (!$skipone) { ?>
                                <img src="https://wordpress.stackexchange.com/questions/26704/<?php echo $image["URL']; ?>" width="<?php echo get_option('product_image_width'); ?>" height="<?php echo get_option('product_image_height'); ?>" class="product_image_variation product_image_<?php echo wpsc_the_variation_id(); ?>" />

              <?php } $skipone = false; ?>
            <?php endwhile; ?>
          <?php endwhile; ?>
        <?php } ?>
  </div> <!--close My Variation-->  

Finally, at the bottom of wp-content/plugins/wp-e-commerce/wpsc-core/js/wp-e-commerce.js I updated the JQuery so it displayed the full pic ont he main product picture.

<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery('.attachment-gold-thumbnails').click(function(){
//              jQuery(this).parents('.imagecol:first').find('.product_image').attr('src', jQuery(this).parent().attr('rev'));
//              jQuery(this).parents('.imagecol:first').find('.product_image').parent('a:first').attr('href', jQuery(this).parent().attr('href'));
                jQuery('.imagecol:first').find('.product_image').attr('src', jQuery(this).parent().attr('href'));
                jQuery('.imagecol:first').find('.product_image').parent('a:first').attr('href', jQuery(this).parent().attr('href'));
                return false;
        });
});
</script>

I think this is already in the wpsc-single-product-page page, but for completeness, it will give you the select dropdown..

  <?php /** the variation group HTML and loop */ ?>
  <?php if (wpsc_have_variation_groups()) { ?>
    <fieldset><legend><?php _e('Product Options', 'wpsc'); ?></legend>
      <div class="wpsc_variation_forms">
        <table>
          <?php while (wpsc_have_variation_groups()) : wpsc_the_variation_group(); ?>
            <tr><td class="col1"><label for="<?php echo wpsc_vargrp_form_id(); ?>"><?php echo wpsc_the_vargrp_name(); ?>:</label></td>
              <?php /** the variation HTML and loop */ ?>
              <td class="col2"><select class="wpsc_select_variation" name="variation[<?php echo wpsc_vargrp_id(); ?>]" id="<?php echo wpsc_vargrp_form_id(); ?>">
                  <?php while (wpsc_have_variations()) : wpsc_the_variation(); ?>
                    <option value="<?php echo wpsc_the_variation_id(); ?>" <?php echo wpsc_the_variation_out_of_stock(); ?>><?php echo wpsc_the_variation_name(); ?></option>
                  <?php endwhile; ?>
                </select></td></tr> 
          <?php endwhile; ?>
        </table>
      </div><!--close wpsc_variation_forms-->
    </fieldset>
  <?php } ?>
  <?php /** the variation group HTML and loop ends here */ ?>

That should be it – the pictures aren’t being controlled by stock so lookout for that It should be easy enough to add in though.