Jump to content

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


CharlotteV

Recommended Posts

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?

 

post-828392-0-03723200-1408694666_thumb.jpg 

 

Thanks a million.

Edited by CharlotteV (see edit history)
Link to comment
Share on other sites

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:
* 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-2014 PrestaShop SA
*  @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)}
          <!-- Products Row -->
        <div id="products_wrapper" class="box-products">            
       <script type="text/javascript">
        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>
          <ul id="products-grid" class="row box-product"> 
        {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}                
            <!-- Product -->
            <li class="{if $col}col-lg-{$col}{else}col-lg-4{/if} col-md-4 col-sm-4 col-xs-12 {if $i%3==0} last {/if} ajax_block_product">
              <div class="product-block">
                <div class="image main-image_{$product.id_product}">
                    {if isset($product.new) && $product.new == 1}
                        <div class="product-new-label product-new"><span>{l s='New'}</span></div>
                    {/if}                       
                  {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                      <div class="product-label product-sale"><span>{l s='SALE'}</span></div>
                  {/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>
                <div class="product-meta">
                  <div class="name">
                      {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)))}
                      <div class="big-price"> 
                          {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}
                          {/if}
                      </div>
                      {/if}
                      <div class="big-btns"> 
                        {if isset($quick_view) && $quick_view}
                        <a class="quick-view btn btn-default btn-view pull-left" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
                        {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}">
                                        <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}
                        {/if}
                      </div>
                      
                        {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                      <div class="small-price"> 
                          {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}
                          {/if}
                      </div>
                      {/if}
                                            
                  <div class="rating"> {hook h='displayProductListReviews' product=$product} </div>
                      <div class="small-btns">
                    {if isset($comparator_max_item) && $comparator_max_item}
                     <a id="comparator_item_{$product.id_product}" class="link-compare btn normal btn-compare pull-left add_to_compare" data-toggle="tooltip" data-original-title="{l s='Add to Compare'}" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}"><i class="fa normal fa-retweet fa-fw"></i></a>
                    {/if}                          
                    <input type="hidden" name="qty" id="quantity_wanted" class="text"  value="1" size="2" maxlength="3" />
                     <a href="#" data-toggle="tooltip" onclick="WishlistCart('wishlist_block_list', 'add', '{$product.id_product|intval}', $('#idCombination').val(), document.getElementById('quantity_wanted').value); return false;"  rel="tooltip" class="btn btn-default btn-wishlist pull-left link-wishlist" title="{l s='Add to Wishlist'} "><i class="fa fa-heart fa-fw"></i></a>                      
                     {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}
                            {/if}
                        {/if}                         
                      </div>
                </div>
                <div class="meta-back"></div>
              </div>
       
            </li>
            <!-- end: Product -->   
            {$i=$i+1}
     {/foreach}             
          </ul>               
          <!-- end: Products Row -->   
         
  
          
<ul id="products-list" class="products-list"> 
   {foreach from=$products item=product name=products}   
    <li class="row list-product ajax_block_product">
            <!-- Product --> 
            <!-- Image -->
            <div class="col-md-4 col-sm-12 col-xs-12 product-image">
              <div class="image main-image_{$product.id_product}">
                    {if isset($product.new) && $product.new == 1}
                        <div class="product-new-label product-new"><span>{l s='New!'}</span></div>
                    {/if}                     
                {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                    <div class="product-label product-sale"><span>{l s='SALE'}</span></div>
                {/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>
            </div>
            <!-- end: Image -->
            
            <div class="col-md-8 col-sm-12 col-xs-12 product-title">
              <div class="producttitle">
                <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>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12 product-price">
                      {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                      <div class="big-price"> 
                          {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}
                          {/if}
                      </div>
                      {/if}
            </div>
            <div class="col-md-5 col-sm-8 col-xs-12 product-meta">
              <div class="productmeta">    
                <div class="cat_desc">
<p class="product-desc" itemprop="description">
{$product.description_short|strip_tags:'UTF-8'|truncate:200:'...'}
</p>
                </div>
                                    
                <div class="category-list-btns">
                    {if isset($comparator_max_item) && $comparator_max_item}
                     <a id="comparator_item_{$product.id_product}" class="link-compare btn normal btn-compare pull-left add_to_compare" data-toggle="tooltip" data-original-title="{l s='Add to Compare'}" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}"><i class="fa normal fa-retweet fa-fw"></i></a>
                    {/if}  
                  
                    <input type="hidden" name="qty" id="quantity_wanted" class="text"  value="1" size="2" maxlength="3" />
                     <a href="#" data-toggle="tooltip" onclick="WishlistCart('wishlist_block_list', 'add', '{$product.id_product|intval}', $('#idCombination').val(), document.getElementById('quantity_wanted').value); return false;"  rel="tooltip" class="btn btn-default btn-wishlist pull-left link-wishlist" title="{l s='Add to Wishlist'} "><i class="fa fa-heart fa-fw"></i></a>                      
                     {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}
                                <a class="btn normal btn-addtocart pull-left ajax_add_to_cart_button">
                                    <span>{l s='Out of stock'}</span>
                                </a>
                            {/if}
                        {/if}                                
                </div>
              </div>
            </div>
            </li>
          <div class="row clearfix f-space20"></div>            
    {/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}        
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!!

Link to comment
Share on other sites

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 =)

Link to comment
Share on other sites

  • 2 weeks later...

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...