I want to show all products, stacked in a nice list, one on top of each other.

I am using {{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}} but it is showing the items as a grid because list.phtml is what my category uses to display products.

How can I just get a list:

  • product 1
  • product 2
  • product 3

etc. ?


There are two options to do that.

  1. This Change will also apply to All Product Listing pages

    Set it from Admin Panel => System-> Configuration -> Catalog -> Catalog -> FrontEnd -> ListMode = Set it to List(Default)/ Grid

  2. This Change will apply only on your block page

    You can copy content catalog/product/list.phtml in your custom file Remove Code related to Grid Mode and use to call in your block.

i wish it could help...

  • BUT that would change the product list format on category pages. I am referring to adding a list of all products on a CMS page by providing a code like {{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}} but of course, list.phtml shows the list in a grid and if I change Admin Panel => System-> Configuration -> Catalog -> Catalog -> FrontEnd -> ListMode = Set it to List(Default)/ Grid settings to LIST, then it changes anything that uses list.phtml to a list format. I guess I need to create a new template? – James Sonny Feb 10 '17 at 17:40
  • Yes you need to create new template file – Dharmesh Feb 10 '17 at 17:45

Just add a new tempalte file in your template folder say catalog/product/cms/list.phtml add below code in it -

    $_helper = $this->helper('catalog/output');
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
    <?php echo $this->getToolbarHtml() ?>
    <?php // List mode ?>
    <?php $_iterator = 0; ?>
    <ol class="products-list" id="products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
            <?php // Product Image ?>
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                <?php $_imgSize = 300; ?>
                <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                     src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
                     alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
            <?php // Product description ?>
            <div class="product-shop">
                <div class="f-fix">
                    <div class="product-primary">
                        <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                        <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a></h2>
                        <?php if($_product->getRatingSummary()): ?>
                        <?php echo $this->getReviewsSummaryHtml($_product) ?>
                        <?php endif; ?>
                        // Provides extra blocks on which to hang some features for products in the list
                        // Features providing UI elements targeting this block will display directly below the product name
                        if ($this->getChild('name.after')) {
                            $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                            foreach ($_nameAfterChildren as $_nameAfterChildName) {
                                $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                                echo $_nameAfterChild->toHtml();
                    <div class="product-secondary">
                        <?php echo $this->getPriceHtml($_product, true) ?>
                    <div class="product-secondary">
                        <?php if(!$_product->canConfigure() && $_product->isSaleable()): ?>
                            <p class="action"><button type="button" title="<?php echo $this->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                        <?php elseif($_product->getStockItem() && $_product->getStockItem()->getIsInStock()): ?>
                            <p class="action"><a title="<?php echo $this->quoteEscape($this->__('View Details')) ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a></p>
                        <?php else: ?>
                            <p class="action availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                    <div class="desc std">
                        <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped ?>" class="link-learn"><?php echo $this->__('Learn More') ?></a>
    <?php endforeach; ?>
    <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>

Now call this block in your cms as given below -

{{block type="catalog/product_list" name="home.catalog.product.cms.list" alias="products_homepage" template="catalog/product/cms/list.phtml"}}


If you know how to create a module in Magento, then what you need to do is, create a Mage_Catalog_Block_Product_List_Toolbar block with a unique name and then use that block in your list block.

If you don't want to create a module for this and love to achieve the same via admin side itself, then you can follow this answer.

Change your block directive like this:

{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml" toolbar_block_name="custom_toolbar_block"}}

If you notice, there is a small addition, which is toolbar_block_name="custom_toolbar_block". This tells Magento:

Hey Magento, I want to use a block with name custom_toolbar_block as my product list block's toolbar block.

Now magento look for the block custom_toolbar_block and if it is defined, it will use that block to render toolbar block for your product list. So let us define our toolbar block. You need to put this content under Design tab inside Layout Update XML section.

<reference name="content">
    <block type="catalog/product_list_toolbar" name="custom_toolbar_block" as="custom_toolbar_block">
        <action method="setData">

[If there is something there under this section, then this xml snippet should go just after that.]

Now let us look into this code:

<block type="catalog/product_list_toolbar" name="custom_toolbar_block" as="custom_toolbar_block">

So you can see that, our block custom_toolbar_block is of type catalog/product_list_toolbar which means it would be an instance of the block class Mage_Catalog_Block_Product_List_Toolbar. Also note, we included our block inside content section.

Under this block, we can see a code:

<action method="setData">

This is what do Magic for you. It sets a special data field called _current_grid_mode with a value list. When such a toolbar block is defined, then it will use that mode to render the product list. So in this case, we specified we need list mode instead of grid mode whenever custom_toolbar_block is used.

This toolbar block is what we used in our product list block definition. Hence your product collection will be listed in list mode instead of grid mode.

Notes: Make sure, you removed all your caches after the changed has done.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.