The template responsible for rendering the product display is node--product--type.tpl.php found in the following directory: /commerce_kickstart/modules/commerce_kickstart/commerce_kickstart_product_ui/theme

This template generates 2 columns, the first contains the product image, and the second contains the product title, description, cart, etc.

Lines 13, 14 and 15 of the module generate the div which defines the column with the photo.

 13   <div class="container-24 grid-14 prefix-1 clearfix">
 14     <?php print render($content['product:field_images']); ?>
 15   </div>

If in defining a new product type you attach the image field to the variation, this code works. If however you attach the image field to the content type, the reference is incorrect. Instead of $content['product:field_images'], it should be $content['field_images'].

The project documentation states that you should be able to add images to the content type, so the theme layer should handle this possibility:

Per Product Display

You can follow the same procedure above to add an image gallery to your product displays. The advantage or difference is that you are adding the image field to the Content Type or the "group" of products. So, if you were selling tshirts and just had one image, this is how you would set that up.

A related problem is that if you use any image field except the existing field_images field, the same problem will occur, since the field id is hard coded into the template.

A workaround for anyone who needs a solution now is to copy node--product--type.tpl.php to the /profiles/commerce_kickstart/themes/commerce_kickstart_theme/templates directory, and rename it to node--YOURPRODUCTNAME.tpl.php. This will override the template for a specific product, and you can then edit the file as necessary to accomodate the image variable you are using.

YOURPRODUCTNAME must be the machine name of your product's content type, replacing any underscores (_) with dashes(-). To find the machine name of your content type, go to Content--> Content Types, and next to the name of each content type you'll see the machine name.

For example, if you see "Product display (Machine name: product_display)", then the machine for is "product_display". If you want to override the Product display node theming, then you have to copy the above mentioned template to node--product-display.tpl.php.


dudenhofer’s picture

Component: Code » Documentation
Assigned: Unassigned » joshmiller
Category: bug » support

This shouldn't be considered a bug. The template was set up for Kickstart-specific products, so it makes sense that if you're making custom products, you would want a custom template. Your work-around is the legitimate way to handle the custom templates. There is no way we would know what you name your new field or what new fields you would be using.

I'm changing this to "Documentation" and assigning it to joshmiller so he can have a look :)

TajinderSingh’s picture

Just in case someone else reaches here searching to display images of field moved under product display, simply go to 'Manage display' page of respective content type. Now here configure your image field's display.

You can refer or note down image field settings for related variation type's image field before deleting the field from variation type.

Remember you will have to configure/note down setting for Full content, Teaser, Product list. On manage display page for variation type, these three are prefixed with 'Node:'. So, Full content be read as 'Node: Full content'

lsolesen’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

saad.waseem’s picture

This is very helpful for me. I have been searching different channels to figure out a solution to show variation images. And the above answer do the work for me. Thank you very much.