I want to add custom div after image block of product view page. In that div I will add custom html like add any text, image etc.

enter image description here

Anyone have idea how we add custom div by plugin or observer?

  • What kind of content you wanted to add there? – Abhishek Tripathi Oct 2 '17 at 13:21
  • @ABHISHEKTRIPATHI I want to add any html content like <div>Testing</div> – Rahul Oct 3 '17 at 5:23

copy the gallery.phtml file from vendor/magento/module-catalog/view/frontend/templates/product/view path to paste app/design/frontend/theme/themename/Magento_Catalog/templates/product/view path and modifie below code.

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask">
        <div class="loader">
            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
    Magento 2
//core code

it will appear your code see pic.

enter image description here

  • Thanks for answer. But I don't want to override files. I want it with plugin or preference. Do you know how we do it with plugin or preference? – Rahul Oct 3 '17 at 5:23

Create a new plugin for getProductDetailsHtml() to add new <div> after product


<type name="Magento\Catalog\Block\Product\ListProduct">
    <plugin name="plugin_name" type="Vendor\Module\Model\Product" />

Now create Product.php



namespace Vendor\Module\Model;

class Product
    public function afterGetProductDetailsHtml($subject, $result)
        $result .= '<div>Your Custom HTML Here</div>';
        return $result;
  • This will add html after product and price. But thats ok. I already do by this method. Thanks. – Rahul Oct 4 '17 at 5:58
  • @Prince Patel i try with your above code it works! but not display in after image. – Chirag Patel Nov 1 '18 at 9:59

There is no plugin will work here, as the whole block is coming from Javascript.

I tried some different way to get rid of the problem.

you can check my answer here

Magento 2.2.1:- How to add text in between main image and thumbnail image

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.