osCommerce. How to change default products listing view

This tutorial will show you how to change default products listing view in your osCommerce template.

Product listing is set to “Grid” by default. Let’s change it to “List”:

1. Connect to your FTP server via FTP (contact your hosting provider if you do not know how to do it) or access your osCommerce files by using hosting cpanel filemanager.

2. Navigate to “includes/modules” folder.

3. Open “product_listing.php” file with any text/php editor.

4. Locate the following code:

<div class="contentContainer page_listing">

  <div class="contentPadd r_view">

  <?php

  echo $prod_list_contents_row;

  ?>
 </div>

  <div class="contentPadd t_view"> 

  <?php

  echo $prod_list_contents;

  ?>
 </div>

  </div>

5. Replace it with:

<div class="contentContainer page_listing">

  <div class="contentPadd t_view">

  <?php

  echo $prod_list_contents_row;

  ?>
 </div>

  <div class="contentPadd r_view"> 

  <?php

  echo $prod_list_contents;

  ?>
 </div>

  </div>

6. Now you should open “stylesheet.css” file, that is located in the “css” folder on your server in the root of osCommerce installation.

7. Locate the following code:

.row_table li.first{background: url(“../images/icons/row.png”) no-repeat scroll 0 0 transparent;	}

.row_table li.last{background: url(“../images/icons/table.png”) no-repeat scroll 0 0 transparent;	}

8. Replace it with:

.row_table li.first{background: url(“../images/icons/table.png”) no-repeat scroll 0 0 transparent;	}

.row_table li.last{background: url(“../images/icons/row.png”) no-repeat scroll 0 0 transparent;	}

9. Clean cookies and cache in your web browser, and check categories pages. This is the end of the tutorial. Let us know if you have any questions.

Feel free to check the detailed video tutorial below: