How to modify Prestashop 8 classic theme to show products in a row with more than 4 columns

[Prestanewbee]

Hello,

the classic theme shows on the homepage popular products and new products. The number of products set to be shown are always shown in 4 colums. How to show them in more than 4 columns per row? I guess you have to modify somewhere the theme files...

Thanks for your help in advance.

[Prestashop Addict]

Hi, you need to modify following templates (search in sub folders): manufacturer.tpl, product-list.tpl, search.tpl, supplier.tpl and change parameter

productClass="col-xs-12 col-sm-6 col-xl-4"

to

productClass="col-xs-12 col-sm-6 col-xl-3"

 

[Prestanewbee]

1 hour ago, Prestashop Addict said:

Hi, you need to modify following templates (search in sub folders): manufacturer.tpl, product-list.tpl, search.tpl, supplier.tpl and change parameter

productClass="col-xs-12 col-sm-6 col-xl-4"

to

productClass="col-xs-12 col-sm-6 col-xl-3"

 

/theme/classic/templates/catalog/listing/product.list.tpl

Changing into

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

did not produce any visible effect. I still have 4 products per row in the homepage for best-sales and new products with the classic theme.

The other files do no show the same row to be changed:best-sales.tpl

{*
 * This file allows you to customize your best-sales page.
 * You can safely remove it if you want it to appear exactly like all other product listing pages
 *}
{extends file='catalog/listing/product-list.tpl'}

[Prestashop Addict]

Sorry I read too quickly your post 😉 For home page it depends on which module (best sale, new product, featured products... You need to change the template of each module

Edited October 1 by Prestashop Addict (see edit history)

[Prestanewbee]

I have explored all the files containing something like col-xs-12 col-sm-6 col-xl-3 and changed everything like col-xs-2. Added also col-lg-2. Deleted browser files and cookies and clear prestashop cache from the settings but nothing changed.

[Prestanewbee]

done!

[Prestanewbee]

I had to modify file theme.css: I grossly substituted all {width:25%} with {width:16%} in the file. Remember to delete cookies and files of the browser and eventually also in prestashop settings to clear the cache

In the product-list.tpl you might have to add col-lg-2. I have no time now to investigate if the first substitution is sufficient. Also keep in mind that substituting all {width:25%} will affect the view for all devices. A finer single substitution of {width:25%} might affect only a specific view.