If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

PrestaShop 1.5.x. How to change the number of subcategories columns

This tutorial is going to show you how to change the number of subcategories per row on your PrestaShop template.

Prestashop 1.5.x. How to change the number of subcategories columns

  1. On your FTP or using the hosting cpanel File Manager tool, go to themes\theme_###\ (where theme### is the name of your theme).

  2. Open category.tpl to edit.

  3. Find line 73 (the number depends on the template) that runs:

  4. categories_box col-xs-4 col-sm-3 col-md-3 col-lg-2 
    
  5. According to the Bootstrap grid system,  there are 4  main column classes that make it easy to create complex grid layouts for a variety of different devices: one for phones, one for tablets, one for desktops and one for large desktops:

    • col-xs-* – phones, up to 480px

    • col-sm-* – tablets, 768px and up

    • col-md-* – desktops, 992px and up

    • col-lg-* – large desktops, 1200px and up

  6. When you look at the CSS used for the various grid classes in bootstrap.min.css under the \themes\theme###\css\ folder, you’ll see that grid columns are just floated left with a percentage width of the size number divided by the number of columns. So, a column with the class .col-lg-6 is just 6/12 = 50% of the width of the container. In other words, in order to change the number of subcategories per row, you will need to maintain the grid columns: just change * in the column classes.

    Please, never edit bootstrap.min.css/bootstrap.css files under any circumstances.

  7. E.g. after changing col-lg-2 to col-lg-3 we get  a grid that shows as 4 columns on large screens:

    prestashop_number_of_subcategories_per_row_changing_1

    after changing col-md-3  to col-md-4 we get  a grid that shows as 3 columns on desktops,

    prestashop_number_of_subcategories_per_row_changing_2

    after changing col-sm-3  to col-sm-4 we get  a grid that shows as 3 columns on tablets,

    prestashop_number_of_subcategories_per_row_changing_3

    and after changing box col-xs-4  to box col-xs-5 we get  a grid that shows as 2 columns on phones. 

    prestashop_number_of_subcategories_per_row_changing_4

Feel free to check the detailed video tutorial below:

Prestashop 1.5.x. How to change the number of subcategories columns