I'm new to Magento. In Magento 2, the product page, I would like to add a script to do something (show/hide some customized elements) associate with this option block:


I have a child-theme of Blank to customized the website and try to extend the product view:




What is the best way to add additional block of code and the script to this options.phtml?

   This is the block of code need to be added before product variations.
   For more information, please <button>[ click here ]</button> 

And clicking on the button would open the so_something.js script. Such as before #product_addtocart_form?

Can I create a separate file for the block only, then how to code them to locate it before #product_addtocart_form, so the options.phtml kept intack? I don't want to overwrite it.

I learned from Magento2 Unit Three (Core Principles for Theming in Magento 2). We can extend page layouts. Can I add it by adding an extending page layout file (catalog_product_view.xml), such as:


1 Answer 1


Yes, you can add your code to page.

First, you need to create a module (and block). For example, app/code/Vendor/MyModule.

Second, add this code in catalog_product_view.xml (mytheme).

<referenceContainer name="content">
    <block name="your-block" class="Vendor/MyModule/Block/Test" template="Vendor_MyModule/test.phtml">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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