More items per row - Problem

[Hizakyx]

i want to use this guide: http://www.module-addon.com/2017/01/different-number-of-products-per-row-in.html, but when i look for: product-list.tpl and the other  (if are like 1.6) is global.js.

But i use now 1.7 and i can`t find them, i mean i find product-list.tpl but do`t have anything like says in the guide.

my web is: http://www.fulldowns.info/

thanks and i hope someone can help me.

 

product-list.tpl are in theme/classic/templates/catalog/listing/product-list.tpl

 

say:

{**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 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/osl-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-2017 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file=$layout}

{block name='content'}
  <section id="main">

    {block name='product_list_header'}
      <h2 class="h2">{$listing.label}</h2>
    {/block}

    <section id="products">
      {if $listing.products|count}

        <div id="">
          {block name='product_list_top'}
            {include file='catalog/_partials/products-top.tpl' listing=$listing}
          {/block}
        </div>

        {block name='product_list_active_filters'}
          <div id="" class="hidden-sm-down">
            {$listing.rendered_active_filters nofilter}
          </div>
        {/block}

        <div id="">
          {block name='product_list'}
            {include file='catalog/_partials/products.tpl' listing=$listing}
          {/block}
        </div>

        <div id="js-product-list-bottom">
          {block name='product_list_bottom'}
            {include file='catalog/_partials/products-bottom.tpl' listing=$listing}
          {/block}
        </div>

      {else}

        {include file='errors/not-found.tpl'}

      {/if}
    </section>

  </section>
{/block}

[vekia]

in prestashop 1.7 classic theme you have to alter .css styles (theme.css)

change width css param in: 

#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
    position: relative;
    margin-bottom: 1.5625em;
    height: 318px;
    width: 257px;
    background: #fff;
    box-shadow: 0 0 5px 3px rgba(0,0,0,.05);
}

#products .highlighted-informations, .featured-products .highlighted-informations, .product-accessories .highlighted-informations, .product-miniature .highlighted-informations {
    position: absolute;
    bottom: 1.25rem;
    z-index: 0;
    background: #fff;
    text-align: center;
    width: 257px;
    height: 3.125rem;
    padding-top: .3125rem;
    box-shadow: 0 -5px 10px -5px rgba(0,0,0,.2);
    transition: bottom .3s;
}

#products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description {
 position: absolute;
 z-index: 1;
 background: #fff;
 width: 257px;
 bottom: 0;
 height: 70px;
}

Use width that will meet your expectactions for exaple (160px)

 

And change the size of image "home_default" in preferences > images section (use size with 4px less than thumbnail_container width defined above: for exmaple 160px-4px)

 

 

effect will be:

[Hizakyx]

Thanks, was very helpfull but i have a problem o i did something wrong.

 

i try to put here , but i can`t

 

theme.css:

theme.css

[3o33y]

Hello, I had the same problem and I solved with this ... thanks vekia.

And if I need to change height of product miniature, and add some informations?
For example ... I need to visualize available quantity and stock position, positioned on the same row, between description and price.
In product.tpl (themes/classic/templates/catalog/_partials/miniatures) I've already insert a span with that informations (for stock position I've used unity price description), but in the product thumbnail, this informations and price go out to the bottom of the box.
Also the highlighted-informations and quickview are hidden under the description.

Thanks in advance

Edited December 19, 2017 by 3o33y
correction (see edit history)

[franky.martin]

Hi @vekia,

thanks for your solution, but I would like to show 2 product columns in mobile. Any idea how to do it?

[franky.martin]

Sorry, I add 

@media (max-width: 991px){ 

and it works. I set the width to 160px and that value fits perfect.

Now I am trying to move the discount flag (see screenshot). In css i saw the value top:  -238px for discount-percentage class, so I add in my custom.css file:

@media (max-width: 991px){ #products .product-miniature .discount-percentage.discount-percentage, #products .product-miniature .on-sale.discount-percentage, #products .product-miniature .online-only.discount-percentage, #products .product-miniature .pack.discount-percentage, #products .product-miniature .product-flags .new.discount-percentage, .featured-products .product-miniature .discount-percentage.discount-percentage, .featured-products .product-miniature .on-sale.discount-percentage, .featured-products .product-miniature .online-only.discount-percentage, .featured-products .product-miniature .pack.discount-percentage, .featured-products .product-miniature .product-flags .new.discount-percentage, .product-accessories .product-miniature .discount-percentage.discount-percentage, .product-accessories .product-miniature .on-sale.discount-percentage, .product-accessories .product-miniature .online-only.discount-percentage, .product-accessories .product-miniature .pack.discount-percentage, .product-accessories .product-miniature .product-flags .new.discount-percentage, .product-miniature .product-miniature .discount-percentage.discount-percentage, .product-miniature .product-miniature .on-sale.discount-percentage, .product-miniature .product-miniature .online-only.discount-percentage, .product-miniature .product-miniature .pack.discount-percentage, .product-miniature .product-miniature .product-flags .new.discount-percentage {
    top: -160px; }
}

but it is not working, any help? My site is https://sps-balonmano.com/

Edited April 5, 2019 by franky.martin (see edit history)

[Fred Peng]

On 4/5/2019 at 1:45 PM, franky.martin said:

Sorry, I add 

@media (max-width: 991px){ 

and it works. I set the width to 160px and that value fits perfect.

Now I am trying to move the discount flag (see screenshot). In css i saw the value top:  -238px for discount-percentage class, so I add in my custom.css file:

@media (max-width: 991px){ #products .product-miniature .discount-percentage.discount-percentage, #products .product-miniature .on-sale.discount-percentage, #products .product-miniature .online-only.discount-percentage, #products .product-miniature .pack.discount-percentage, #products .product-miniature .product-flags .new.discount-percentage, .featured-products .product-miniature .discount-percentage.discount-percentage, .featured-products .product-miniature .on-sale.discount-percentage, .featured-products .product-miniature .online-only.discount-percentage, .featured-products .product-miniature .pack.discount-percentage, .featured-products .product-miniature .product-flags .new.discount-percentage, .product-accessories .product-miniature .discount-percentage.discount-percentage, .product-accessories .product-miniature .on-sale.discount-percentage, .product-accessories .product-miniature .online-only.discount-percentage, .product-accessories .product-miniature .pack.discount-percentage, .product-accessories .product-miniature .product-flags .new.discount-percentage, .product-miniature .product-miniature .discount-percentage.discount-percentage, .product-miniature .product-miniature .on-sale.discount-percentage, .product-miniature .product-miniature .online-only.discount-percentage, .product-miniature .product-miniature .pack.discount-percentage, .product-miniature .product-miniature .product-flags .new.discount-percentage {
    top: -160px; }
}

but it is not working, any help? My site is https://sps-balonmano.com/

Hi, Franky,

I saw your website and you have modified nicely. Can you share how you modified it? 

[viniciuslbb]

good afternoon, how are you? i have prestashop 1.7 when i installed i managed to put 4 products per line in the categories, for some reason when i deleted a category it got back to 3 per line can someone help me?

[viniciuslbb]

I managed to solve thank you friends

[CharlieBean]

Hello All

I have gone through @vekia  example above and changed the width size from 250px to 220px to get 3 columns per row.  I also changed the Image Settings for home_default to 216px.  Everything worked correctly in the featured products section of the home page as per the screen shot. 

The image in the  "On Sale" section did not resize to 216px using the home_default setting and it is still sitting at the default of 250px.  Do you know where to change the "On Sale" sections image size? See below the examples of what this section looks like.

 

Featured Products Section:

 

On Sale Section:

The Image at 250px

 

[Mikael Mortensen]

I did the following on 1.7.8.8:

Open file

/themes/classic/templates/catalog/listing/product-list.tpl

change:

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-12 col-sm-6 col-xl-4"}

to

{include file='catalog/_partials/products.tpl' listing=$listing productClass="col-xs-6 col-xl-4"}

AND

 

In the file:

themes/classic/templates/catalog/_partials/productlist.tpl

change

{if !empty($productClass)}{$productClass}{else}col-xs-12 col-sm-6 col-xl-4{/if}{/capture}

to

{if !empty($productClass)}{$productClass}{else}col-xs-6 col-xl-4{/if}{/capture}

 

That worked for me.

Best regards,
Mikael

Edited February 24, 2023 by Mikael Mortensen (see edit history)