Magento use the associated product images for the group product image

Posted on March 7, 2014

howdy, so i have a client who has a lot of grouped products and they don’t like having to re upload product images for the group product when the images are already on the simple product. And i too think it can be improved. So i have modified magento a bit so each time a grouped product is being viewed, if no image has been uploaded for that grouped product it uses the images from the associated products.

if you would like to have a look check out my dev install here:

http://dev.pixelpaul.net/magento/1-8-1/category-2.html?mode=grid

the grouped product there has no individual image i assigned to it, instead it is using the images from the simple products assigned to the grouped product.

This is what i did with a standard 1.8 magento install but the code can be modified very easily if you have any lightbox or other extension installed.

first find the file in your magento folder
/app/design/frontend/*yourdesignpackage*/*yourtheme*/template/catalog/product/view/media.phtml

if you can’t find the file simply copy it from you base theme.

now i have made a fair few changes here so the full file is here, and i have commented in my changes but i have changed a few of the overall wrapping if statements to include some elseifs.

if you want to download the file you can here:

media.phtml

now the whole idea is…
If it is a grouped product and you have uploaded an image for it, it will use that. But if you have not uploaded an image for the grouped product then it will pull in the associated product images and use them instead. The main image it pulls in is randomly selected from one of the associated products. There are some image sizes in there you can modify to the size you want. And then all associated product images are inserted below the main image.

Now i have also modified the file:
/app/design/frontend/*yourdesignpackage*/*yourtheme*/template/catalog/product/view/type/grouped.phtml

to have a small image next to the associated product name, so you know which is which. Very useful for different colours.

just ABOVE this line

add another <th> </th>

now in the <tbody> and after the <tr> add this line.

you can change the 30,30 to another size if you want the image smaller or larger, it is the width and height.

now we need to edit the catalog listing so find this file:
/app/design/frontend/*yourdesignpackage*/*yourtheme*/template/catalog/product/list.phtml

find the 2 img tags in the code and replace the whole tag with this for both.

so what that does is randomly selects one of the associated products and use its image to be displayed.

now paste the following code where you would like small images of the other associate products displayed. So the visitor can see all available colours.

i myself put the above code under the product short description for the list view and under the main image for the grid view.

you can download my complete list.phtml edited file here list.phtml

now what about the compare and whislist where the images are needed too.

find this file for the compare list:

/app/design/frontend/*yourdesignpackage*/*yourtheme*/template/catalog/product/compare/list.phtml

and find the main img tag and replace with this ( very similar to the list code )

and again if you want the remaining small images past this code somewhere ( maybe in a new row even ) i just pasted it below the main image.

and now for the wishlist. find and edit this file:

/app/design/frontend/*yourdesignpackage*/*yourtheme*/template/wishlist/item/column/image.phtml

and replace the img tag with this code

i chose not to include all the small images but you can by using the code we used for the compare list, you will just need to replace the occurrences of $_item with $product.

all done. please let me know how you go below in the comments.