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

Question

I would like to have the functionality for image to change when the user selects a different variation.

ie, If I'm selling a T-shirt and have create two variations (Red and White). I would like for the main product image box to the image when the user selects a color. The Red shirt image should be displayed when the Red "Color" variation is selected. On the backend there is an area to add product thumbnails for each variation but that does not correspond with any change to the product image on the frontend.

Answer 1

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="<?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.

Answer 2

I was unable to get the proposed solution to work (maybe doesn't work with the latest).

There is a plugin called SP WPEC Variation Image Swap . It works well with WP E Commerce 3.8.7.6.2 (but not 3.8.8 beta).

Note: to set the variation pics, edit the main product and once you make variation/sets available by checking them and hitting the update button, you will see each variation listed below, with a link to EDIT each variation. The part that took me a while to figure out is that for the variation image it is not enough to simply select the image by clicking 'manage product images', but you must go there to choose your image (click 'show' next to the image if already in the media library), THEN you must click the 'use as product thumbnail' link, save, save all changes, and hit 'publish' which will bring you back to the main product EDIT screen.

One pain is you have to do this for every combination of variations. For example, on a t-shirt site with sizes and colors, each color variation pic must be added for every size variation (S blue, M blue, L blue, XL blue, etc etc), but all-in-all a very handy solution