{"id":804,"date":"2011-05-19T13:48:32","date_gmt":"2011-05-19T21:48:32","guid":{"rendered":"https:\/\/www.numinix.com\/blog\/?p=804"},"modified":"2019-05-30T11:54:02","modified_gmt":"2019-05-30T18:54:02","slug":"how-to-display-attribute-images-on-the-zen-cart-shopping-cart-page","status":"publish","type":"post","link":"https:\/\/www.numinix.com\/blog\/how-to-display-attribute-images-on-the-zen-cart-shopping-cart-page\/","title":{"rendered":"How to display attribute images on the Zen Cart shopping cart page"},"content":{"rendered":"<p>Although Zen Cart supports defining an image for a product&#8217;s attribute (i.e. different colors of t-shirts for a color attribute), once you add the product to your cart, only the default image will display.\u00a0 Although you could hack the shopping cart page as per\u00a0 instructions in the <a title=\"Edit Shopping Cart Page to use Attribute Images\" href=\"http:\/\/www.zen-cart.com\/forum\/showpost.php?p=806696&amp;postcount=7\" target=\"_blank\" rel=\"noopener\">Zen Cart forum<\/a>, a simpler approach is to edit the shopping_cart class.\u00a0 This approach may be better as it will cause Zen Cart to output the attribute image anywhere that the shopping_cart class is used.<\/p>\n<p>It is important that all Zen Cart stores that use attribute images implement one of these processes as it can be confusing to customers when they see a different product in their shopping cart than what they selected.  The following implementation will resolve this issue.<\/p>\n<p>To begin, open includes\/class\/shopping_cart.php and find:<\/p>\n<div class=\"wp_syntax\">\n<div class=\"code\">\n<pre class=\"php\" style=\"font-family:monospace;\">$products_array[] = array('id' =&gt; $products_id,<\/pre>\n<\/div>\n<\/div>\n<p>Add before:<\/p>\n<div class=\"wp_syntax\">\n<div class=\"code\">\n<pre class=\"php\" style=\"font-family:monospace;\">\r\n        \/\/ support attribute images\r\n        if (isset($this->contents[$products_id]['attributes'])) {\r\n          foreach ($this->contents[$products_id]['attributes'] as $options_id => $options_values_id) {\r\n            \/\/ get the attributes image using the options_id and options_values_id\r\n            $attributes_image = $db->Execute(\"SELECT attributes_image \r\n                                              FROM \" . TABLE_PRODUCTS_ATTRIBUTES . \" \r\n                                              WHERE products_id = \" . (int)$products_id . \"\r\n                                              AND options_id = \" . $options_id . \"\r\n                                              AND options_values_id = \" . $options_values_id . \"\r\n                                              LIMIT 1;\");\r\n            if ($attributes_image->RecordCount() > 0 && $attributes_image->fields['attributes_image'] != '') {\r\n              $products->fields['products_image'] = $attributes_image->fields['attributes_image'];\r\n              break;\r\n            }  \r\n          }\r\n        }<\/pre>\n<\/div>\n<\/div>\n<p>Now, when you visit your shopping cart page, assuming it uses the shopping_cart class, you will now see the image of the attribute that was added.  There is one shortcoming, which more relates to Zen Cart itself than this method, and that is that if you have multiple attributes for a product and different images assigned to each attribute, it isn&#8217;t possible to assign an image to a combination of attributes (i.e. a large red t-shirt vs. a small red t-shirt).  The above code will use the image from the first attribute that it finds (i.e. a red t-shirt, regardless of size).<\/p>\n<p>We&#8217;ve also used a similar method in Fast and Easy AJAX Checkout v2.15.10+ which will allow showing product and attribute images in the checkout.<\/p>\n<p><script type=\"application\/ld+json\">\n      {\n        \"@context\": \"http:\/\/schema.org\",\n        \"@type\": \"NewsArticle\",\n\t\"dateModified\": \"https:\/\/calendar.google.com\/calendar\/r\/day\/2019\/5\/29\",\n\t\"mainEntityOfPage\": \"https:\/\/www.numinix.com\/wordpress\/2011\/05\/19\/how-to-display-attribute-images-on-the-zen-cart-shopping-cart-page\/\",\n\"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"Jenna Scaglione\"\n  },\n   \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Numinix Web Developers\",\n    \"logo\": {\n      \"@type\": \"ImageObject\",\n      \"url\": \"https:\/\/www.numinix.com\/images\/banner_hero_clarity.png\"\n    }\n    },\n        \"headline\": \"How to display attribute images on the Zen Cart shopping cart page\",\n        \"datePublished\": \"2011-05-19T16:00:41Z\",\n        \"image\": [\n          \"https:\/\/www.numinix.com\/wordpress\/wp-content\/uploads\/2019\/05\/web-design.jpg\"\n        ]\n      }\n    <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Although Zen Cart supports defining an image for a product&#8217;s attribute (i.e. different colors of t-shirts for a color attribute), once you add the product to your cart, only the default image will display.\u00a0 Although you could hack the shopping cart page as per\u00a0 instructions in the Zen Cart forum, a simpler approach is to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[322,45,8],"class_list":["post-804","post","type-post","status-publish","format-standard","hentry","category-zen-cart-optimization","tag-attribute-images","tag-shopping-cart","tag-zen-cart"],"modified_by":"Numinix Developer","jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts\/804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/comments?post=804"}],"version-history":[{"count":0,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts\/804\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/media?parent=804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/categories?post=804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/tags?post=804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}