I want to add my custom block on listing page[Magento-2] but without any modification on list.phtml or any .phtml file. Is there any possibility by using xml file ?

enter image description here

Any help will be appreciated.

  • Great article. Would you expand more detail on test.phtml to override the orginal listing page? As I'm a new comer on Magento 2. – user35216 Jan 19 '16 at 3:48
  • How can I get use the function getProductDetailsHtml() for add block 'label' NEW on grid in test.phtml? – Kllee Jan 21 '16 at 2:36

You can do that if you create new module to override this block: vendor\magento\module-catalog\Block\Product\ListProduct.php

to override this block, you need to create di.xml at app\code\Vendor\Module_Name\etc

di.xml content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Block\Product\ListProduct" type="Vendor\Module_Name\Block\Product\ListProduct" />

Create new file name ListProduct.php at app\code\Vendor\Module_Name\Block\Product

ListProduct.php content:

namespace Vendor\Module_Name\Block\Product;
class ListProduct extends \Magento\Catalog\Block\Product\ListProduct
    public function getProductDetailsHtml(\Magento\Catalog\Model\Product $product)
        $html = $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')->setProduct($product)->setTemplate('Vendor_ModuleName::test.phtml')->toHtml();
        $renderer = $this->getDetailsRenderer($product->getTypeId());
        if ($renderer) {
            return $html.$renderer->toHtml();
        return '';

You can change block Magento\Framework\View\Element\Template to your block

create test.phtml file at app\code\Vendor\Module_Name\view\frontend\templates

  • Thanks for the information +1 from me... But can we achieve without override ? – Keyur Shah Jan 11 '16 at 10:06
  • @KeyurShah, is above the best method so far in Mage 2.0 to add your custom block on listing page ? I also agree with Kandy as product output is hardcoded in list.phtml. – Slimshadddyyy Feb 8 '16 at 13:08
  • @Vikram till now, I think this is the best method so far and is also working fine for me.. – Keyur Shah Feb 8 '16 at 13:38
  • @KeyurShah, I have already overriddien that with di.xml using above method. Now how to display my custom attribute value in listing page ? – Slimshadddyyy Feb 9 '16 at 8:08
  • @Vikram you can use Mageev2 code to display your custom attribute. I mean in test.phtml you can get $product object and from $product object you can get easily its attribute value. – Keyur Shah Feb 9 '16 at 8:39

Currently you cannot do this because all logic of product output is hardcoded in list.phtml template.

  • Yeah I know that,,But is there any hook or any trick available for that ? Btw, Thanks for the information. – Keyur Shah Jan 11 '16 at 9:39

Here is my take on the solution - but you must modify the list.phtml template:


<referenceBlock name="category.products.list">
    <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="custom.block.container" as="custom-block-container">
        <block class="Magento\Catalog\Block\Product\ProductList\Item\Block" name="custom.block" as="custom-block"
           template="Magento_Catalog::product/view/custom-block.phtml" />

In custom-block.phtml you can get the product like this:

$_product = $block->getProduct();

You will need to overwrite the list.phtml template though... Just add this where you want your custom block to show:

<?php if ($customBlock = $block->getChildBlock('custom-block-container')): ?>
    <?= $customBlock->setProduct($_product)->getChildHtml() ?>
<?php endif; ?>

If you really want to avoid modifying the list.phtml template, then you might be able to do a similar thing but in a different template.

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.