Magento 2 How I can add a div inside `product-image-container` in Magento to catalog pages

Question

I want to add a New <div> in inside class="product-image-container" in Magento 2 I have searched and found that this class is rendered like this

$productImage = $block->getImage($_product, $imageDisplayArea);
<?= $productImage->toHtml() ?>

How I can do this task please let me know thank you

Answer 1

You can archive this by overridden the below file,

vendor/magento/module-catalog/view/frontend/templates/product/image_with_borders.phtml

To your theme

app/design/frontend/Magento_Catalog/templates/product/image_with_borders.phtml

In this file, you can add the custom class inside the

<span class="product-image-container" style="width:<?= /* @escapeNotVerified */ $block->getWidth() ?>px;">

Save the file and clear cache, Hope this will work for you.