[Solved] Product list doesn't show the whole product name and "Add to cart" duplicated

CharlotteV · August 22, 2014

Hello everyone, I am having a hard time trying to make the product list show the entire product name. As you can see in the screenshot (or in the shop www.maracuyes.com) when you roll the mouse over there is a lot of space to show the name but it is used for the button "Add to cart". This button is useless since there is another one under it so I would like to delete this button and show the full name of the product instead. Can you give me some guidance on how to accomplish this?

Thanks a million.

Edited August 30, 2014 by CharlotteV (see edit history)

vekia · August 22, 2014

please show contents of product-list.tpl file

you use custom theme, it's necessary to inspect this file

usually problem is related to |truncate modifier

in this case problem can be the same.

CharlotteV · August 22, 2014

please show contents of product-list.tpl file

The entire file? I hope not have misunderstood. There it go:

{*

* 2007-2014 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]>

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

* International Registered Trademark & Property of PrestaShop SA

*}

{if isset($products)}

jQuery(document).ready(function($){

$('.link-compare').click(function(){

var idProduct = $(this).attr('id').replace('comparator_item_', '');

$.ajax({

url: 'index.php?controller=products-comparison&ajax=1&action=add&id_product=' + idProduct,

async: true,

dataType: "json",

success: function(responseData) {

if(responseData==0){

showPopup();

productImageSrc = jQuery('.main-image_'+idProduct+' img').attr('src');

productImage = '<img width="72" src="'+productImageSrc+'" />';

//productName = jQuery('.main-image_'+idProduct+' img').attr('alt');

//cartHref = jQuery('#top-cart > a').attr('href');

popupHtml = productImage + notsuccessfullyaddcompare;

popupWindow.find('.etheme-popup-content').css('backgroundImage','none').html(popupHtml);

jQuery('.cont-shop').one('click',function(){

hidePopup(popupOverlay,popupWindow);

});

}

else{

showPopup();

productImageSrc = jQuery('.main-image_'+idProduct+' img').attr('src');

productImage = '<img width="72" src="'+productImageSrc+'" />';

productName = jQuery('.main-image_'+idProduct+' img').attr('alt');

//cartHref = jQuery('#top-cart > a').attr('href');

popupHtml = productImage + '<em>'+productName+'</em> ' + successfullycompareaddsuccess;

popupWindow.find('.etheme-popup-content').css('backgroundImage','none').html(popupHtml);

jQuery('.cont-shop').one('click',function(){

hidePopup(popupOverlay,popupWindow);

});

}

},

error: function(XMLHttpRequest, textStatus, errorThrown) {

}

});

$(".link-compare").click(function(e) {

e.preventDefault();

});

})

</script>

{if (isset($themesdev.td_pro_rows) && ($themesdev.td_pro_rows==2)) || (isset($numberofpro) && ($numberofpro==2))}

{$col=6}

{else}

{$col=4}

{/if}

{$i=1}

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

{if isset($product.new) && $product.new == 1}

{/if}

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}

{/if}

<a href="{$product.link}" class="img"><img title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" 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}"></a>

</div>

{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}

<a href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}</a>

</div>

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}

<span class="price-new">{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}

<span class="price-old">{displayWtPrice p=$product.price_without_reduction}</span>

{/if}

</div>

{/if}

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

{l s='view'}

</a>

{/if}

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

</a>

{else}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

</a>

{/if}

{else}

<span>{l s='Out of stock'}</span>

</span>

{/if}

</div>

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}

<span class="price-new">{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}

<span class="price-old">{displayWtPrice p=$product.price_without_reduction}</span>

{/if}

</div>

{/if}

<div class="rating"> {hook h='displayProductListReviews' product=$product} </div>

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

{/if}

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="btn btn-default btn-addtocart pull-left ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" data-toggle="tooltip" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}"> <i class="fa fa-shopping-cart fa-fw"></i></a>

{else}

<a class="btn btn-default btn-addtocart pull-left ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" data-toggle="tooltip" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}"> <i class="fa fa-shopping-cart fa-fw"></i></a>

{/if}

</div>

</div>

</li>

{$i=$i+1}

{/foreach}

</ul>

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

{if isset($product.new) && $product.new == 1}

{/if}

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}

{/if}

<a href="{$product.link}" class="img"><img title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" 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}"></a>

</div>

<h1>

{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}

<a href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}</a>

</h1>

<div class="rating"> {hook h='displayProductListReviews' product=$product} </div>

{* <span class="reviews-info">This product has 30 review(s)</span> *}

</div>

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}

<span class="price-new">{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}

<span class="price-old">{displayWtPrice p=$product.price_without_reduction}</span>

{/if}

</div>

{/if}

</div>

{$product.description_short|strip_tags:'UTF-8'|truncate:200:'...'}

</p>

</div>

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

{/if}

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="btn normal btn-addtocart pull-left ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" data-toggle="tooltip" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}"> <i class="fa fa-shopping-cart fa-fw"></i>{l s='Add to cart'}</a>

{else}

<a class="btn normal btn-addtocart pull-left ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" data-toggle="tooltip" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}"> <i class="fa fa-shopping-cart fa-fw"></i>{l s='Add to cart'}</a>

{/if}

{else}

<span>{l s='Out of stock'}</span>

</a>

{/if}

</div>

</li>

{/foreach}

</ul>

</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}

PascalVG · August 23, 2014

In the above file, you have the lines:

<a href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}</a>

Increase this number to make more letters of the name visible, or take the whole |truncate:45:'...' out to show all.

You also have to change some css:

themes/flatroshop/css/custom.css (line 1126) (Make backup!)

.product-block .product-meta .name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    height: 23px;                    <- dependent on the amount of text space needed, change to for example 80px;
    ~~overflow: hidden;~~              <- remove/comment out this line, to get all name visible.
    text-align: center;
}

To make space for the text when not hovering, try this:

same custom.css file, line 1110:

.product-block .product-meta {
    background-color: #E65A4B;
    bottom: 0px;
    color: #FFF;
    height: 150px;                               <-- change 100px to higher number, dependent on max text space needed
    padding: 10px;
    position: absolute;
    transition: height 0.5s ease-in-out 0s;
    width: 100%;
}

to remove the big add to cart button, in the product-list.tpl code you copied above, comment out the following code (about 20 lines below the trucate line)

{* <<- add this here to comment-out the code block below

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

</a>

{else}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

</a>

{/if}

{else}

<span>{l s='Out of stock'}</span>

</span>

{/if}

*} <-- add this here to comment-out the code block

Maybe we need to fine tune some block heights etc, but this is basically it, I think.

If you see any problems, let us know and we try to modify more.

Hope this helps,

pascal

CharlotteV · August 25, 2014

In the above file, you have the lines:

<a href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}</a>

Increase this number to make more letters of the name visible, or take the whole |truncate:45:'...' out to show all.

You also have to change some css:

themes/flatroshop/css/custom.css (line 1126) (Make backup!)

.product-block .product-meta .name {

    display: block;

    font-size: 15px;

    font-weight: 600;

    height: 23px;                    <- dependent on the amount of text space needed, change to for example 80px;

    ~~overflow: hidden;~~              <- remove/comment out this line, to get all name visible.

    text-align: center;

}

To make space for the text when not hovering, try this:

same custom.css file, line 1110:

.product-block .product-meta {

    background-color: #E65A4B;

    bottom: 0px;

    color: #FFF;

    height: 150px;                               <-- change 100px to higher number, dependent on max text space needed

    padding: 10px;

    position: absolute;

    transition: height 0.5s ease-in-out 0s;

    width: 100%;

}

to remove the big add to cart button, in the product-list.tpl code you copied above, comment out the following code (about 20 lines below the trucate line)

{*      <<- add this here to comment-out the code block below

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

<span>{l s='Add to cart'}</span>

</a>

{else}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

<span>{l s='Add to cart'}</span>

</a>

{/if}

{else}

<span class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button">

<span>{l s='Out of stock'}</span>

</span>

{/if}

*}    <-- add this here to comment-out the code block

Maybe we need to fine tune some block heights etc, but this is basically it, I think.

If you see any problems, let us know and we try to modify more.

Hope this helps,

pascal

Hi PascalVG, I spend the weekend trying this with no success. I tried to increase the number after truncate and I tried deleting the whole |truncate:... but it didn't work, it seems that the changes I made doesn't affect the way the name of the product is showing up. When I tried to eliminate the big "Add to cart" button with your instructions I only see it change the position when you are hovering but it didn't go away. I hope you can help me out with this. Thanks in advance!!

CharlotteV · August 27, 2014

In the above file, you have the lines:

<a href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}</a>

Increase this number to make more letters of the name visible, or take the whole |truncate:45:'...' out to show all.

You also have to change some css:

themes/flatroshop/css/custom.css (line 1126) (Make backup!)

.product-block .product-meta .name {

    display: block;

    font-size: 15px;

    font-weight: 600;

    height: 23px;                    <- dependent on the amount of text space needed, change to for example 80px;

    ~~overflow: hidden;~~              <- remove/comment out this line, to get all name visible.

    text-align: center;

}

To make space for the text when not hovering, try this:

same custom.css file, line 1110:

.product-block .product-meta {

    background-color: #E65A4B;

    bottom: 0px;

    color: #FFF;

    height: 150px;                               <-- change 100px to higher number, dependent on max text space needed

    padding: 10px;

    position: absolute;

    transition: height 0.5s ease-in-out 0s;

    width: 100%;

}

to remove the big add to cart button, in the product-list.tpl code you copied above, comment out the following code (about 20 lines below the trucate line)

{*      <<- add this here to comment-out the code block below

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

<span>{l s='Add to cart'}</span>

</a>

{else}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

<span>{l s='Add to cart'}</span>

</a>

{/if}

{else}

<span class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button">

<span>{l s='Out of stock'}</span>

</span>

{/if}

*}    <-- add this here to comment-out the code block

Maybe we need to fine tune some block heights etc, but this is basically it, I think.

If you see any problems, let us know and we try to modify more.

Hope this helps,

pascal

I tried again and now it's working perfect. I am really thankful =)

Markaus · September 10, 2014

In the above file, you have the lines:

<a href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}</a>

Increase this number to make more letters of the name visible, or take the whole |truncate:45:'...' out to show all.

You also have to change some css:

themes/flatroshop/css/custom.css (line 1126) (Make backup!)

.product-block .product-meta .name {

    display: block;

    font-size: 15px;

    font-weight: 600;

    height: 23px;                    <- dependent on the amount of text space needed, change to for example 80px;

    ~~overflow: hidden;~~              <- remove/comment out this line, to get all name visible.

    text-align: center;

}

To make space for the text when not hovering, try this:

same custom.css file, line 1110:

.product-block .product-meta {

    background-color: #E65A4B;

    bottom: 0px;

    color: #FFF;

    height: 150px;                               <-- change 100px to higher number, dependent on max text space needed

    padding: 10px;

    position: absolute;

    transition: height 0.5s ease-in-out 0s;

    width: 100%;

}

to remove the big add to cart button, in the product-list.tpl code you copied above, comment out the following code (about 20 lines below the trucate line)

{*      <<- add this here to comment-out the code block below

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

<span>{l s='Add to cart'}</span>

</a>

{else}

<a class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

<span>{l s='Add to cart'}</span>

</a>

{/if}

{else}

<span class="btn btn-default btn-addtocart pull-right ajax_add_to_cart_button">

<span>{l s='Out of stock'}</span>

</span>

{/if}

*}    <-- add this here to comment-out the code block

Maybe we need to fine tune some block heights etc, but this is basically it, I think.

If you see any problems, let us know and we try to modify more.

Hope this helps,

pascal

Hi Pascal, I need your help, i would like to display the star rating without the need to move my mouse on it.. and i would also like "free shipping" text to appear on each product that have free shipping..

the hover display should remain same.. but i need these change before hover.. check on photo how it should be.. can you help plz?

Sign In

[Solved] Product list doesn't show the whole product name and "Add to cart" duplicated

Recommended Posts

CharlotteV

Link to comment

Share on other sites

vekia

Link to comment

Share on other sites

CharlotteV

Link to comment

Share on other sites

PascalVG

Link to comment

Share on other sites

CharlotteV

Link to comment

Share on other sites

CharlotteV

Link to comment

Share on other sites

Markaus

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com