In this article, I will share you a solution to achieve the two grid layout for product listing page. In this way, you could show larger product thumbnail in the product listing. It will look like:

Update the width & height for thumbnail image group

In order to show large thumbnail in the two grid layout, we need to update the default width and height for thumbnail image group.

Step 1. Go to admin panel > Definitions > Image Groups.

Step 2. Update the width & height of  image group.

As the preceding image shown, i update both the width and height to 220px. You could enter the proper value depending on your own requirement.

Step 3. Go to admin panel > Tools > Images.

Step 4. Click the resize images button. Then select the thumbnail group and check the overwrite checkbox.

Just click the Execute button to resize the thumbnails.

Update product listing view to add the two grid layout button

After updating the product thumbnails, we could now change the default listing view.

Step1. Open templates > bootstrap > helper.php.

— Find following code snippet:

function get_products_listing_view_type() {
    //check view type
    $view_type = 'list';
    if (isset($_GET['view'])) {
        if ($_GET['view'] == 'grid') {
            $view_type = 'grid';
        }
    } else if (isset($_SESSION['view_type'])) {
        if ($_SESSION['view_type'] == 'grid') {
            $view_type = 'grid';
        }
    }
    //set view type to session
    $_SESSION['view_type'] = $view_type;

    return $view_type;
}

— Replace it with:

function get_products_listing_view_type() {
    if (isset($_GET['view'])) {
        if ($_GET['view'] == 'grid') {
            $view_type = 'grid';
        }else if ($_GET['view'] == 'grid2') {
            $view_type = 'grid two-cols';
        }else if ($_GET['view'] == 'list') {
            $view_type = 'list';
        }
    }else if (isset($_SESSION['view_type'])) {
        if ($_SESSION['view_type'] == 'grid') {
            $view_type = 'grid';
        }else if ($_SESSION['view_type'] == 'grid2') {
            $view_type = 'grid two-cols';
        }else if ($_SESSION['view_type'] == 'list') {
            $view_type = 'list';
        }
    }else {
      $view_type = 'list';
    }

    //set view type to session
    $_SESSION['view_type'] = $view_type;

    return $view_type;
}

Step 2. Open templates > bootstrap > modules > product_listing.php.

— Find following code:

<div class="btn-group">
                    <?php
                        if ($view_type == 'list') {
                    ?>
                        <a class="btn btn-small active"><i class="icon-th-list"></i></a> /
                        <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid'); ?>"><i class="icon-th"></i></a>
                    <?php
                        } else {
                    ?>
                        <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=list'); ?>"><i class="icon-th-list"></i></a> /
                        <a class="btn btn-small active"><i class="icon-th"></i></a>
                    <?php
                        }
                    ?>
 </div>

— Replace it with:

<div class="btn-group">
            <?php
                if ($view_type == 'list') {
            ?>
                <a class="btn btn-small active"><i class="icon-th-list"></i></a> /
                <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid'); ?>"><i class="icon-th"></i></a>
              <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid2'); ?>"><i class="icon-th-large"></i></a>
            <?php

                } else if ($view_type == 'grid') {
            ?>
                <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=list'); ?>"><i class="icon-th-list"></i></a> /
                <a class="btn btn-small active"><i class="icon-th"></i></a>
              <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid2'); ?>"><i class="icon-th-large"></i></a>
            <?php
                }else if ($view_type == 'grid two-cols') {
            ?>
              <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=list'); ?>"><i class="icon-th-list"></i></a> /
              <a class="btn btn-small" href="<?php echo osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params(array('view')) . '&view=grid'); ?>"><i class="icon-th"></i></a>
              <a class="btn btn-small active"><i class="icon-th-large"></i></a>
          <?php
              }

          ?>

            </div>

Step 3. Open templates > bootstrap > index.php.

— Find following code:

<meta name="Generator" content="TomatoCart" />

— Add following code after it:

<style>
    ul.grid.two-cols li{
        width: 50%;
    }

    ul.list li img {
        max-width: 80px;
    }
  </style>

That’s it. Now, you customer could view your products with two grid layout. It might be useful for your store need to show a more larger product thumbnail in the listing.

Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting