Magento 2.2.6: How to add <div> on product listing page without override file?

Question

I want to add custom div on product listing page under class="product-image-container" <span> without override product list.phtml & catalog_category_view.xml file.

And i also want to display dynamic data in to my custom div from database is it possible? if yes then how can i achieve this thing. for more reference check below screen-shoot.

Any help would be Appreciated!

Answer 1

Create di.xml file at /app/code/Vendor/Module/etc/frontend/di.xml :

<type name="Magento\Catalog\Block\Product\ListProduct">
    <plugin name="block-product-list" type="Vender\Module\Plugin\ProductList"/>
</type>

Create Plugin file ProductList.php at /app/code/Vendor/Module/Plugin :

<?php
namespace Vender\Module\Plugin;

class ProductList
{
    /**
     * @var \Magento\Framework\View\LayoutInterface
     */
    protected $layout;   
    public function __construct(
        ...............
        \Magento\Framework\View\LayoutInterface $layout,
        ...............
    ) {
        ...............
        $this->layout = $layout;
        ...............
    }
    public function aroundGetProductDetailsHtml(
        \Magento\Catalog\Block\Product\ListProduct $subject,
        \Closure $proceed,
        \Magento\Catalog\Model\Product $product
    ) {
        return $this->layout->createBlock('VendorName\ModuleName\Block\BlockName')->setTemplate('VendorName_ModuleName::yourphtml.phtml')->toHtml();
        /*If you want to specific product pass then you need to call phtml like 
        $this->layout->createBlock('VendorName\ModuleName\Block\BlockName')->setProduct($product)->setTemplate('VendorName_ModuleName::yourphtml.phtml')->toHtml();
        */
    }               
}

Hope, It may be helpful for you.