Magento

eCommerce Software for Online Growth

Magento Forum

From setting up your store to managing your products, pages and promotions to generating detailed reports, the Magento User Guide empowers the user to utilize the platform for all of its vast capacity.
Available in eBook and Print formats – Download Now!!!
   
Increase number of columns in category page
 
nyckidd
Jr. Member
 
Total Posts:  15
Joined:  2008-09-20
 

how do i increase the number of columns in our catgeory view when in grid mode...right now we hve 2 but i want them to have 5 products in each row so that means i need to increase the number of columns from 2 to 5...any pointers ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
jkragh
Sr. Member
 
Total Posts:  84
Joined:  2009-06-18
 

Depending on what version of Magento you’re using there are two ways to do this. To determine which way you should use, open your theme’s template/catalog/product/list.phtml file and search for “columnCount”. If the search yields results, follow these steps:

1. Open your theme’s layout/catalog.xml file in a text editor.

2. Find the layout handle catalog_category_layered and look for an element whose opening tag looks thus:

<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">

3. Insert the following XML snippet immediately after that opening tag and then save the file:

<action method="setColumnCount"><columns>5</columns></action>

4. Open your theme’s css/boxes.css file. Search for “.listing-type-grid li.item”. Adjust the width property within this declaration so that the columns can fit within the .col-main area without breaking onto multiple lines.

5. As a finishing touch, change the size of the product images. To do this, open your theme’s template/catalog/product/list.phtml file; then, search for “Grid Mode”. Once you’ve found that point in the file, search for “resize”. Change the dimensions specified within the parenthesis so that the images can fit within your new column width. Also, remember change the width and height attributes to reflect your new image size. Save the file once you’ve made your changes.

If the search yields no results, replace steps 1-3 with these steps:

1. Open your theme’s template/catalog/product/list.phtml file.

2. Search for “Grid Mode”. Once you’ve found that point in the file, find a line that looks similar to

<?php if($i++%3==0): ?>
and change the number (3) to your desired column count (5):
<?php if($i++%5==0): ?>

Hope that helps.

 Signature 

Magetool - Making Magento development easier.

 
Magento Community Magento Community
Magento Community
Magento Community
 
nyckidd
Jr. Member
 
Total Posts:  15
Joined:  2008-09-20
 

hey my version of mageno is Magento ver. 1.3.2.1

tried oth but was not abe to find those lines of code......is it under the frontend folder ?

and my list.phtml ( the grid section looks like this )

<?php // Grid Mode ?>
<div class="listing-type-grid catalog-listing">
<?php $_collectionSize $_productCollection->count() ?>
    <?php $_columnCount 
$this->getColumnCount(); ?>
    <?php $i
=0; foreach ($_productCollection as $_product): ?>
        <?php 
if($i++%$_columnCount==0): ?>
        
<ol class="grid-row">
        
<?php endif; ?>
            
<li class="item">
                <
class="product-image">
                    <
a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
                        <
img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
                    </
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 type="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%$_columnCount==|| $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
 
jkragh
Sr. Member
 
Total Posts:  84
Joined:  2009-06-18
 

Oops! I made a mistake in my previous post. The opening tag in step 2 should look like this:

<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">

I’ve now edited the post to correct the mistake.

I can tell from your list.phtml file that you should use the first approach.

Assuming you’re using the default interface and the default theme, the paths to the directories I mentioned are as follows:

app/design/frontend/default/default/template/catalog/product/list.phtml
app/design/frontend/default/default/layout/catalog.xml
skin/frontend/default/default/css/boxes.css

 Signature 

Magetool - Making Magento development easier.

 
Magento Community Magento Community
Magento Community
Magento Community
 
nyckidd
Jr. Member
 
Total Posts:  15
Joined:  2008-09-20
 

i dont seem to have this “product” folder......this is a brand new install....

app/design/frontend/default/default/template/product/list.phtml

 
Magento Community Magento Community
Magento Community
Magento Community
 
nyckidd
Jr. Member
 
Total Posts:  15
Joined:  2008-09-20
 

and also in catalog.xml there are 2 instances of

<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">

do i add <action method="setColumnCount"><columns>5</columns></action> under both ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
jkragh
Sr. Member
 
Total Posts:  84
Joined:  2009-06-18
 

Sorry, I must be getting tired; I left out the “catalog” part of the path. It should be: app/design/frontend/default/default/template/catalog/product/list.phtml. Again, sorry about that. (I’ve now edited the posts.) red face

In catalog.xml you should add the snippet following the instance that comes after <catalog_category_layered>.

 Signature 

Magetool - Making Magento development easier.

 
Magento Community Magento Community
Magento Community
Magento Community
 
nyckidd
Jr. Member
 
Total Posts:  15
Joined:  2008-09-20
 

jkragh.......duuuuuudddddeeee u r god !!!! thxs it worked like a charm....men people like jkragh need to be worshipped smile ok let me get a hold of my freaking sef here...i still got a few other things i need help with smile but jkragh u da man!!!! hope u r a dude...if u r a chic i will just edit this post !!!

Thx !!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
jkragh
Sr. Member
 
Total Posts:  84
Joined:  2009-06-18
 

You’re very kind. Glad I could help.

And, yeah, I’m a dude. tongue laugh

 Signature 

Magetool - Making Magento development easier.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jeff.d
Sr. Member
 
Total Posts:  103
Joined:  2008-05-26
 

This helped me too....thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
Steve Morgan
Jr. Member
 
Total Posts:  2
Joined:  2009-06-22
 

Bear in mind when testing this that also included with the style is a background image

.listing-type-grid { background:url(../images/bkg_products-grid3.gif) 0 0 repeat; }

which creates the grey divider between products and would need to be updated, so when applying the above technique and viewing a category with only product is gives the impression that the fix hasn’t worked

 
Magento Community Magento Community
Magento Community
Magento Community
 
knwhitten
Jr. Member
 
Total Posts:  18
Joined:  2009-05-06
 

Hi, I hope somebody out there can help me with this. I followed the steps in this thread, but my list.phtml file looks different than described. I have 4 columns in my grid view and would like to go back to 3. Rather than a number in the columnCount, I have a $ symbol.

<?php if ($i++%$_columnCount==0): ?>
Right now it looks crowded, and the columns need more space between them. I attached a picture so you can see what it currently looks like. Here’s a snippet of the Grid code. And I’m using the modern theme.

<?php // Grid Mode ?>
<div class="listing-type-grid  catalog-listing padder"> <!-- the class name will change to .listing-type-cell if viewing in list mode -->
<?php $_collectionSize $_productCollection->count() ?>
    
<table cellspacing="0" class="generic-product-grid" id="product-list-table">
    
<?php $_columnCount $this->getColumnCount(); ?>
    <?php $i
=0; foreach ($_productCollection as $_product): ?>
    <?php 
if ($i++%$_columnCount==0): ?>
    
<tr>
    
<?php endif ?>
        
<td>
            <
class="product-image">
                <
a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
                    <
img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170, 170); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
                </
a>
            </
p>

Any help would be appreciated. I’ve been searching for a solution for this for hours. Thank you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
knwhitten
Jr. Member
 
Total Posts:  18
Joined:  2009-05-06
 

sorry for the double post.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jkragh
Sr. Member
 
Total Posts:  84
Joined:  2009-06-18
 
knwhitten - 23 November 2009 08:03 PM

I followed the steps in this thread

Well, not quite. You’ve followed the steps which apply to old versions of Magento. From the way your list.phtml file looks I can infer that you need to follow the topmost steps, i.e.,

1. Open your theme’s layout/catalog.xml file in a text editor.

2. Find the layout handle catalog_category_layered and look for an element whose opening tag looks thus:

<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">

3. Insert the following XML snippet immediately after that opening tag and then save the file:

<action method="setColumnCount"><columns>5</columns></action>

...

 Signature 

Magetool - Making Magento development easier.

 
Magento Community Magento Community
Magento Community
Magento Community
 
knwhitten
Jr. Member
 
Total Posts:  18
Joined:  2009-05-06
 

Thanks for your response. All these different versions get confusing. I did what you said and didn’t get any change. Here’s that part of the code from my catalog.xml file:

<catalog_category_layered>
        <
reference name="root">
            <
action method="setTemplate"><template>page/2columns-left.phtml</template></action>
        </
reference>
        <
reference name="left">
            <
block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml"/>
        </
reference>
        <
reference name="content">
            <
block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
                <
block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                <
action method="setColumnCount"><columns>3</columns></action>
                    <
block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                        <!-- 
The following code shows how to set your own pager increments -->
                        <!--
                        <
action method="setDefaultListPerPage"><limit>10</limit></action>
                        <
action method="setDefaultGridPerPage"><limit>9</limit></action>
                        <
action method="addPagerLimit"><mode>list</mode><limit>10</limit></action>
                        <
action method="addPagerLimit"><mode>list</mode><limit>20</limit></action>
                        <
action method="addPagerLimit"><mode>list</mode><limit>30</limit></action>
                        <
action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                        <
action method="addPagerLimit"><mode>grid</mode><limit>9</limit></action>
                        <
action method="addPagerLimit"><mode>grid</mode><limit>18</limit></action>
                        <
action method="addPagerLimit"><mode>grid</mode><limit>27</limit></action>
                        <
action method="addPagerLimit" translate="label"><mode>grid</mode><limit>all</limit><label>All</label></action>
                        -->
                    </
block>
                    <
action method="setColumnCount"><count>3</count></action>
                    <
action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
                </
block>
            </
block>
        </
reference>
    </
catalog_category_layered>

    <
catalog_category_layered_nochildren>
        <
remove name="right.reports.product.viewed" />
        <
reference name="left">
            <!--<
block type="reports/product_viewed" before="right.permanent.callout" name="left.reports.product.viewed" template="reports/product_viewed.phtml" />-->
        </
reference>
    </
catalog_category_layered_nochildren>

Do you see anything else wrong? Or is there another file that needs to be altered as well? Take a look at my site here:
Notably Krystal

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
 
© Copyright 2010 Varien. Magento, eCommerce software, is a trademark of Irubin Consulting Inc. DBA Varien
Privacy Policy|Terms of Service
Magento Community Count
177679 users|1178 users currently online|277246 forum posts