In e-Commerce business, Product image is a vital aspect, to attract a visitor’s eye in the first place. In PrestaShop 1.7, If you have combination product then PrestaShop shows image of the one selected by default in product combination instead of the generic (Cover) image of your product.
Do you want to show generic (Cover) image of your product on the product listing (On the homepage and category page)? If yes, then find out how to show generic (Cover) image of your product on the product listing in PrestaShop 1.7 programmatically.
Step 1: Open the file, In your theme directory : templates\catalog\_partials\miniatures\product.tpl
Step 2: Find the below code:
1 2 3 4 5 6 7 8 9 | {if $product.cover} <a class="thumbnail product-thumbnail" href="{$product.canonical_url}"> <img src="{$product.cover.bySize.home_default.url}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" /> </a> {else} <a class="thumbnail product-thumbnail" href="{$product.canonical_url}"> <img src="{$urls.no_picture_image.bySize.home_default.url}" /> </a> {/if} |
Step 3: Replace the below code snippet:
1 2 3 4 5 6 7 8 9 10 11 | {if $product.cover} {assign var='coverImage' value=Product::getCover($product->id)} {assign var='coverImageId' value="{$product->id}-{$coverImage.id_image}"} <a class="thumbnail product-thumbnail" href="{$product.canonical_url}"> <img src="{$link->getImageLink($product.link_rewrite, $coverImageId)}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" /> </a> {else} <a class="thumbnail product-thumbnail" href="{$product.canonical_url}"> <img src="{$urls.no_picture_image.bySize.home_default.url}" /> </a> {/if} |
Step 4: Clear the Cache and check for the same. Done!
Enjoy PrestaShop 1.7!
October 2, 2019 at 3:29 pm
Wow thanks a lot it worked well. By any chance do you have the code that could permit to display also as a thumbnail the first image of each combination available for a product ? I’m dying with it trying to find how to do it.
April 8, 2020 at 7:35 pm
Thank you very much!
It worked very well!
July 4, 2020 at 6:50 pm
I cant the accurate code on PS1.7.6.5
I’m using a template
July 17, 2020 at 5:46 pm
Hi, in homepage and search page not working.
I solved it in this way:
modify $product->id in $product.id
{assign var=’coverImage’ value=Product::getCover($product.id)}
{assign var=’coverImageId’ value=”{$product->id}-{$coverImage.id_image}”}