Help With Product View Configuration

[chrixx93]

Hi i have an ecommerce site with LeoBigStore theme and default grid view. As you know in default grid view there is image,product name,price and add to cart like this picture:

 

 

 

I'd like to have name of the product before the image and after the image only prce and add to cart. How can i do this?

Thanks.

[gabdara]

In your theme, edit product-list.tpl, look for the code block of product name and move it above the product image.

[chrixx93]

This is the code of product-list.tpl. How can i do it?

Thanks

 

 

 

{*

* 2007-2015 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

*  @author PrestaShop SA <[email protected]>

*  @copyright  2007-2015 PrestaShop SA

*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)

*  International Registered Trademark & Property of PrestaShop SA

*}

{include file="$tpl_dir./layout/setting.tpl"}

{if !isset($productClassWidget)}

    {assign var="productClassWidget" value={hook h="pagebuilderConfig" configName="productClass"[spam-filter]

{/if}

{if !isset($productProfileDefault)}

    {assign var="productProfileDefault" value={hook h="pagebuilderConfig" configName="productKey"[spam-filter]

{/if}

{if isset($products) && $products}

{*define numbers of product per line in other page for desktop*}

        {if isset($class)}

            {*only display grid mode when include from other module*}

            {assign var="LISTING_GRIG_MODE" value="grid" scope="global"}

            {assign var='nbItemsPerLine' value=$LISTING_PRODUCT_COLUMN_MODULE}

            {if $LISTING_PRODUCT_COLUMN_MODULE=="5"}

                {assign var="colValue" value="col-xs-{12/$LISTING_PRODUCT_MOBILE} col-sm-{12/$LISTING_PRODUCT_TABLET} col-md-2-4 col-sp-12" scope="global"}

            {else}

                {assign var="colValue" value="col-sp-12 col-xs-{12/$LISTING_PRODUCT_MOBILE} col-sm-{12/$LISTING_PRODUCT_TABLET} col-md-{12/$LISTING_PRODUCT_COLUMN_MODULE}" scope="global"}

            {/if}

        {else}

            {assign var='nbItemsPerLine' value=$LISTING_PRODUCT_COLUMN}

{/if}

        {assign var='nbItemsPerLineTablet' value=$LISTING_PRODUCT_TABLET}

        {assign var='nbItemsPerLineMobile' value=$LISTING_PRODUCT_MOBILE}

{*define numbers of product per line in other page for tablet*}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}

<!-- Products list -->

<div {if isset($id) && $id} id="{$id}"{/if} class="product_list {$LISTING_GRIG_MODE} row {if isset($class) && $class} {$class}{/if}{if isset($productClassWidget)} {$productClassWidget}{/if} nomargin">

{foreach from=$products item=product name=products}

{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}

{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}

{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}

{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}

<div class="ajax_block_product col-sp-12 {$colValue}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line

{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}

{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}

{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line

{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}

{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line

{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}

{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

{if isset($productProfileDefault) && $productProfileDefault}

                {capture name=productPath}{$tpl_dir}./profiles/{$productProfileDefault}.tpl{/capture}

                {include file="{$smarty.capture.productPath}" callFromModule=isset($class)}

            {else}

                {include file="$tpl_dir./sub/product-item/product-item.tpl" callFromModule=isset($class)}

            {/if}

</div>

 

{/foreach}

</div>

{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}

{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}

{addJsDef comparator_max_item=$comparator_max_item}

{addJsDef comparedProductsIds=$compared_products}

{/if}

[gabdara]

I looks that in your theme the code for the product is in product-item.tpl.

If you paste more code in the thread, please use the Code block (<> icon left of Quote), not the Quote block.

[chrixx93]

Thanks for your answer.

The code in product-item.tpl is this:

{*
	************************
		Creat by leo themes
	*************************
*}
{if !isset($callFromModule) || $callFromModule==0}
{include file="$tpl_dir./layout/setting.tpl"}
{/if}
<div class="product-container text-center product-block" itemscope itemtype="https://schema.org/Product">
	<div class="left-block">
		<div class="product-image-container image">
			<div class="leo-more-info" data-idproduct="{$product.id_product}"></div>
			<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
				<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
				<span class="product-additional" data-idproduct="{$product.id_product}"></span>
			</a>
			
			<div class="box-buttons">
				{if isset($quick_view) && $quick_view}
					<a class="quick-view" href="{$product.link|escape:'html':'UTF-8'}" data-link="{$product.link|escape:'html':'UTF-8'}">
						<span><i class="fa fa-eye"></i></span>
					</a>
				{/if}
				{if $ENABLE_WISHLIST}			
					{hook h='displayProductListFunctionalButtons' product=$product}					
				{/if}
				
				{if isset($comparator_max_item) && $comparator_max_item}
					<a class="add_to_compare compare" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}">
						<span><i class="fa fa-refresh"></i></span>
					</a>
				{/if}
			</div>	
			{if isset($product.new) && $product.new == 1}
				<a class="new-box" href="{$product.link|escape:'html':'UTF-8'}">
					<span class="label-new product-label label-info label">{l s='New'}</span>
				</a>
			{/if}
			{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
				<a class="sale-box" href="{$product.link|escape:'html':'UTF-8'}">
					<span class="label-sale product-label label-warning label">{l s='Sale!'}</span>
				</a>
			{/if}
		</div>
		{if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if}
		{hook h="displayProductPriceBlock" product=$product type="weight"}
	</div>
	<div class="right-block">
		<div class="product-meta">
			<h5 itemprop="name" class="name">
				{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
				<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
					{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
				</a>
			</h5>
			{if $page_name != "product"}
				{hook h='displayProductListReviews' product=$product}
			{/if}
			<p class="product-desc" itemprop="description">
				{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
			</p>
			{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
				<div class="content_price">
					{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
						{hook h="displayProductPriceBlock" product=$product type='before_price'}
						<span class="price product-price">
							{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
						</span>
						{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
							{hook h="displayProductPriceBlock" product=$product type="old_price"}
							<span class="old-price product-price">
								{displayWtPrice p=$product.price_without_reduction}
							</span>
							{hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"}
							{if $product.specific_prices.reduction_type == 'percentage'}
								<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
							{/if}
						{/if}
						{hook h="displayProductPriceBlock" product=$product type="price"}
						{hook h="displayProductPriceBlock" product=$product type="unit_price"}
						{hook h="displayProductPriceBlock" product=$product type='after_price'}
					{/if}
				</div>
			{/if}
			{if isset($product.color_list) && $ENABLE_COLOR}
				<div class="color-list-container">{$product.color_list} </div>
			{/if}
			<div class="product-flags">
				{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
					{if isset($product.online_only) && $product.online_only}
						<span class="online_only label-flags label-warning">{l s='Online only'}</span>
					{/if}
				{/if}
				{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
					{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
						<span class="discount label-flags label-danger">{l s='Reduced price!'}</span>
					{/if}
			</div>
			{if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
				{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
					<span class="availability">
						{if ($product.allow_oosp || $product.quantity > 0)}
							<span class="{if $product.quantity <= 0 && isset($product.allow_oosp) && !$product.allow_oosp} label-danger{elseif $product.quantity <= 0} label-warning{else} label-success{/if}">
								{if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}
							</span>
						{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
							<span class="label label-warning">
								{l s='Product available with different options'}
							</span>
						{else}
							<span class="label label-danger">
								{l s='Out of stock'}
							</span>
						{/if}
					</span>
				{/if}
			{/if}

				<div class="functional-buttons clearfix">				
					<div class="cart">
						{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
							{if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
								{capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture}
								<a class="button ajax_add_to_cart_button btn" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product-attribute="{$product.id_product_attribute|intval}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
									<span>{l s='Add to cart'}</span>
								</a>
							{else}
							<div class="btn btn-default disabled" title="{l s='Out of stock'}">
								 
								<span>{l s='Out of stock'}</span>
							</div>
							{/if}
						{/if}
					</div>
				</div>

		</div>
	</div>
</div><!-- .product-container> -->

Can you help me? Thanks

[gabdara]

Move:

<h5 itemprop="name" class="name">
    {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
    <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
        {$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
    </a>
</h5>

Under:

<div class="leo-more-info" data-idproduct="{$product.id_product}"></div>

[chrixx93]

Thanks for your reply. I tried to do it and it works only on homepage but when i go to subcategories they didn't changed.

How can i do this?

Thanks so much

[gabdara]

There might be also in another tpl, look through the profiles folder in your theme to see if you can find the same <h5> as in product-item.tpl.

You should contact the theme developer because the structure is different than the default theme and he would know better.

[mausbaus]

Even if it's an old topic, for those facing the same problem, in PS 1.7, the file you are looking for is located in /templates/catalog/_partials/miniatures/

In the Classic theme, is called product.tpl but in other themes you might find it named product-listgrid.tpl