Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

More than three products per row in grid view
 
inspiredbackpacker
Member
 
Avatar
Total Posts:  47
Joined:  2008-09-01
 

How do I have more than three products per row in grid vie? I know I need to change the code as shown in this thread,

http://www.magentocommerce.com/boards/viewthread/842/

but how?I will continue to mess with my precious code and wait for an answer to fall on my head

 
Magento Community Magento Community
Magento Community
Magento Community
 
inspiredbackpacker
Member
 
Avatar
Total Posts:  47
Joined:  2008-09-01
 

Scratch that, I figured it out myself again. Maybe it’s the posting it that triggers something. Anyways, I new it had something to do with changing the number 3 found in the code, I just forgot to change all four, forgot the one on the top. Now I’m good.

 
Magento Community Magento Community
Magento Community
Magento Community
 
storeonline123
Member
 
Avatar
Total Posts:  68
Joined:  2007-12-12
 
inspiredbackpacker - 05 September 2008 12:13 PM

Scratch that, I figured it out myself again. Maybe it’s the posting it that triggers something. Anyways, I new it had something to do with changing the number 3 found in the code, I just forgot to change all four, forgot the one on the top. Now I’m good.

@ inspiredbackpacker
How did you accomplish this? I can’t find the location of the file to edit. I was also wondering how to do this.

 
Magento Community Magento Community
Magento Community
Magento Community
 
inspiredbackpacker
Member
 
Avatar
Total Posts:  47
Joined:  2008-09-01
 

The file location is:  magento/app/design/frontend/default/default/template/catalog/product/list.phtml

The code to change is the numbers 3 found in here, one at the top, three at the bottom:

<?// Grid Mode?>
    
<div class="listing-type-grid  catalog-listing"> <!-- the class name will change to .listing-type-cell if viewing in list mode -->
    
<?$_collectionSize $_productCollection->count()?>
        
<table cellspacing="0" class="generic-product-grid" id="product-list-table">
        
<?$i=0; foreach ($_productCollection as $_product):?>
        <?if 
($i++%3==0):?>
        
<tr>
        
<?endif?>
            
<td>
                <
class="product-image">
                    <
a href="<?=$_product->getProductUrl()?>" title="<?=$this->htmlEscape($_product->getName())?>">
                        <
img src="<?=$_product->getSmallImageUrl()?>" width="135" height="135" alt="<?=$this->htmlEscape($_product->getName())?>"/>
                    </
a>
                </
p>
                <
h5><a href="<?=$_product->getProductUrl()?>" title="<?=$this->htmlEscape($_product->getName())?>)"><?=$_product->getName()?></a></h5>
                
<?=$this->getHelper('review/helper')->getSummaryHtml($_product'short')?>
                <?
=$this->getHelper('catalog/product')->getPriceHtml($_product)?>
                <?if
($_product->isSaleable()):?>
                
<button class="form-button" onclick="setLocation('<?=$this->getAddToCartUrl($_product)?>')"><span><?=$this->__('Add to Cart')?></span></button>
                
<?endif;?>
                
<div class="clear"></div>
                <
class="add-to">
                    <
a href="<?=$this->getAddToWishlistUrl($_product)?>" class="link-cart"><?=$this->__('Add to Wishlist')?></a>
                    
<?if($_compareUrl=$this->getAddToCompareUrl($_product)):?><br/>
                    <
a href="<?=$_compareUrl?>"><?=$this->__('Add to Compare')?></a>
                    
<?endif;?>
                
</p>
            </
td>
        
<?if ($i%3==0):?>
        
</tr>
        
<?endif?>
        <?endforeach?>
        <?for
($i;$i%3!=0;$i++):?>
            
<td class="empty-product">&nbsp;</td>
        
<?endfor?>
        <?if 
($i%3==0):?>
        
</tr>
        
<?endif?>
        
</table>
        <
script type="text/javascript">decorateTable('product-list-table')</script>
    
</div>

Good luck

 
Magento Community Magento Community
Magento Community
Magento Community
 
storeonline123
Member
 
Avatar
Total Posts:  68
Joined:  2007-12-12
 

@ inspiredbackpacker
Thanks alot its working!

 
Magento Community Magento Community
Magento Community
Magento Community
 
inspiredbackpacker
Member
 
Avatar
Total Posts:  47
Joined:  2008-09-01
 

Just some more help on fixing the widths, they are found in the css class (.listing-type-grid td)

Change the percentage to 25%

 
Magento Community Magento Community
Magento Community
Magento Community
 
msohler
Jr. Member
 
Total Posts:  12
Joined:  2008-08-14
 

Thanks for your suggestion, but it must be for magento before 1.1.6 as that page doesn’t even have “table” in it any more.
here’s the grid area and I see the 3 but when I change it to 4 and one other to 3 and change the css to 25% it still does’t break at 4. products. 

<?php // Grid Mode ?>
<div class="listing-type-grid catalog-listing">
<?php $_collectionSize $_productCollection->count() ?>
    <?php $i
=0; foreach ($_productCollection as $_product): ?>
        <?php 
if($i++%3==0): ?>
        
<ol class="grid-row">
        
<?php endif; ?>
            
<li class="item">
                <
class="product-image">
                    <
a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                        <
img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                    </
a>
                </
p>
                <
h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5>
                
<?php if($_product->getRatingSummary()): ?>
                <?php 
echo $this->getReviewsSummaryHtml($_product'short'?>
                <?php 
endif; ?>
                <?php 
echo $this->getPriceHtml($_producttrue?>
                <?php 
if($_product->isSaleable()): ?>
                    
<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart'?></span></button>
                
<?php else: ?>
                
<div class="out-of-stock"><?php echo $this->__('Out of stock'?></div>
                
<?php endif; ?>
                
<class="add-to">
                    
<?php if ($this->helper('wishlist')->isAllow()) : ?>
                    
<a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-cart"><?php echo $this->__('Add to Wishlist'?></a>
                    
<?php endif; ?>
                    <?php 
if($_compareUrl=$this->getAddToCompareUrl($_product)): ?><br/>
                    <
a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare'?></a>
                    
<?php endif; ?>
                
</p>
            </
li>
        
<?php if($i%3==|| $i==$_collectionSize): ?>
        
</ol>
        
<?php endif; ?>
    <?php 
endforeach ?>
    
<script type="text/javascript">decorateGeneric($$('.grid-row'), ['last''odd''even']);</script>
</div>
<?php endif; ?>
<?php 
echo $this->getToolbarHtml() ?>
<?php 
endif; ?>

I even change the image to be much smaller.

<?php // Grid Mode ?>
<div class="listing-type-grid catalog-listing">
<?php $_collectionSize $_productCollection->count() ?>
    <?php $i
=0; foreach ($_productCollection as $_product): ?>
        <?php 
if($i++%4==0): ?>
        
<ol class="grid-row">
        
<?php endif; ?>
            
<li class="item">
                <
class="product-image">
                    <
a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                        <
img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(92, 126); ?>" width="92" height="126" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                    </
a>
                </
p>
                <
h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5>
                
<?php if($_product->getRatingSummary()): ?>
                <?php 
echo $this->getReviewsSummaryHtml($_product'short'?>
                <?php 
endif; ?>
                <?php 
echo $this->getPriceHtml($_producttrue?>
                <?php 
if($_product->isSaleable()): ?>
                    
<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart'?></span></button>
                
<?php else: ?>
                
<div class="out-of-stock"><?php echo $this->__('Out of stock'?></div>
                
<?php endif; ?>
                
<class="add-to">
                    
<?php if ($this->helper('wishlist')->isAllow()) : ?>
                    
<a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-cart"><?php echo $this->__('Add to Wishlist'?></a>
                    
<?php endif; ?>
                    <?php 
if($_compareUrl=$this->getAddToCompareUrl($_product)): ?><br/>
                    <
a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare'?></a>
                    
<?php endif; ?>
                
</p>
            </
li>
        
<?php if($i%4==|| $i==$_collectionSize): ?>
        
</ol>
        
<?php endif; ?>
    <?php 
endforeach ?>
    
    
    
    
<script type="text/javascript">decorateGeneric($$('.grid-row'), ['last''odd''even' ]);</script>
</div>
<?php endif; ?>
<?php 
echo $this->getToolbarHtml() ?>
<?php 
endif; ?>
 
Magento Community Magento Community
Magento Community
Magento Community
 
JRushMusic.com
Jr. Member
 
Avatar
Total Posts:  2
Joined:  2008-10-04
Miami, FL
 

can you change this pn version 1.1.6

 
Magento Community Magento Community
Magento Community
Magento Community
 
msohler
Jr. Member
 
Total Posts:  12
Joined:  2008-08-14
 

Ok I figured some of it out for Magento 1.1.6
You do have to change the 3 to 4 in 2 places (there are only 2 places to make this fix in 1.1.6 as mentioned above. )

in this file:  app/design/frontend/default/default/template/catalog/product/list.phtml
Change from this <?php if($i++%3==0): ?> to this <?php if($i++%4==0): ?>

But you also have change the skin/frontend/default/default/css/boxes.css file -
and FYI the changing of 33% to 25% didn’t fix it entirely, as mentioned above
I also had to change the 138px to 95 px and for regular 3 colums layout
and I changed the 208 to 105 pix (see the lines below /* my fix */ for the exact lines.
You would also have to edit the back ground image so that the “line” shows up between columns.
but I didn’t get that far yet.  and I didnt’ figure out the rest of the layouts, but this is the area to make the changes.

/* Grid Type */
.listing-type-grid { background:url(../images/bkg_products-grid3.gif0 0 repeat}
.listing-type-grid .grid-row { border-bottom:1px solid #d9dde3; }
/*.listing-type-grid li.item { float:left; width:138px; padding:12px 10px; line-height:1.6em; overflow:hidden; }*/
/* my fix  */
.listing-type-grid li.item { float:leftwidth:95px;  padding:12px 10pxline-height:1.6emoverflow:hidden}
.listing-type-grid .last { border-bottom:0}
.listing-type-grid .product-image { text-align:center}
.listing-type-grid .rating-box { float:leftmargin-left:0margin-right:5px}
.listing-type-grid .actions { margin:10px 0text-align:center}
/* Rewrites for different layouts */
.col-1-layout .listing-type-grid { background-image:url(../images/bkg_products-grid1.gif); }
.col-1-layout .listing-type-grid li.item { width:280px
.col-1-layout .listing-type-grid li.item { width:280px}
.col-2-left-layout .listing-type-grid,
.
col-2-right-layout .listing-type-grid { background-image:url(../images/bkg_products-grid2.gif); }
.col-2-left-layout .listing-type-grid li.item,
/* .col-2-right-layout .listing-type-grid li.item { width:208px; }*/
/* my fix  */
.col-2-right-layout .listing-type-grid li.item { width:150px}
 
Magento Community Magento Community
Magento Community
Magento Community
 
msohler
Jr. Member
 
Total Posts:  12
Joined:  2008-08-14
 

skip this post, i edited the original where I made a mistake

 
Magento Community Magento Community
Magento Community
Magento Community
 
nath247
Jr. Member
 
Total Posts:  3
Joined:  2008-10-28
 

Thanks great thread. but just another question how do you get rid of the boeders to the products or reduce the width, cant find it in the css boxes.
probably stering right at me

 
Magento Community Magento Community
Magento Community
Magento Community
 
vinnieh
Jr. Member
 
Total Posts:  5
Joined:  2009-01-01
 

I set the bkg_products-grid2.gif image to 169 pixels wide and that worked perfectly for 4 products.  I just opened up the image in Photoshop and changed the image size to 169 pixels wide. I’m sure other image programs can do the same thing so there’s no need for overkill. I just know how to do it in Photoshop. That seemed to work well for the 4 column product layout.

 
Magento Community Magento Community
Magento Community
Magento Community
 
vinnieh
Jr. Member
 
Total Posts:  5
Joined:  2009-01-01
 

Oh, I forgot to mention… When editing these images, you have to clear your image cache every time. Go to Cache Management in the Admin Panel click the “Clear” button next to “Images Cache”.

 
Magento Community Magento Community
Magento Community
Magento Community
 
stanb17
Member
 
Total Posts:  34
Joined:  2010-06-02
 

I have successfully crammed 4 products into the grid by altering the styles-blue-yellow.css for my particular theme. I changed the default width from 138 to 123px.

/* View Type: Grid */
.products-grid { position:relative; }
.products-grid.last { border-bottom:0; }
.products-grid li.item { float:left; width:123px; padding:10px 5px 20px; border-right:1px solid #d7d7d7; text-align: center; }

Now the problem is that the entire grid itself is not taking advantage of the space available.
http://www.discountguitarparts.com/index.php/hardware/tuners-machine-heads.html?p=2

I’d like for it to occupy the same space as the product view does.
http://www.discountguitarparts.com/index.php/hardware/tuners-machine-heads/6pc-gold-tombstone-style-3l-3r-sealed-gear-tuners.html

Inspecting the element tells me where to look, but making changes does not alter the table/grid at all. Is my coffee too weak? Am I missing some part of the clue?

Any help would be greatly appreciated.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top