2

I want to override product view page and add my custom code over that.

So please help me on how can I override template of product view page.

Thank you.

Improve this question
1
  • Have many methods to custom template of product view page. May you show detail which you want to custom on the page.
    – MrTo-Kane
    Commented Apr 16, 2016 at 16:40

3 Answers 3

Reset to default
7

@Dmync In order to accomplish this the basic answer is "it depends." The first question that would need to be answered is "What do you want to override?" This question is too broad.

If you're trying to override some template(s) that are in place by default for product view then you can need to track down the templates you want to override. You can do so by either of the following:

  1. Follow directions here: enable template hints
  2. Go to vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml and track down all the template files that are explicitly assigned here, as well as all other templates included via <update> layout instruction update docs

Once you know which templates you want to update, then you can follow the general ideas within this page to create the correct module structure. Basically if you're creating a module to perform these actions then you'll need a structure like:

app/code/<Vendor>/<module>/view/frontend/Magento_Catalog/templates and then you'd continue to refer to the structure of Magento_Catalog for it's folder hierarchy...and you'd add that into your module...so

If you're wanting to override vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml then you'd create app/code/<Vendor>/<Module>/view/frontend/Magento_Catalog/templates/product/view/form.phtml. Then you could do your customizations there..again, refer to the templates customization doc I linked.

If you're trying to do this via a theme. Using the above example....you'd create app/design/frontend/<Vendor>/<theme>/Magento_Catalog/product/view/form.phtml and perform whatever customizations you'd like in that template.

So which ever way you go about it, either creating a custom module or a custom design theme, and if you're simply modifying the template content, you're going to need to recreate the target module (in this case Magento_Catalog) in your own custom module/theme (using the correct directory hierarchies...as it's slightly different between module/theme).

If you're interested in modifying css then look here for info on overriding css.

If you need to modify some of the page's layout xml files to rearrange elements, remove elements, add elements, etc...look here to get started.

As you can see, there's a lot that can take place in simply "Overriding product view page."

Improve this answer
1
2

If you want only override template file of product view page, You need to set template inside your custom theme file from vendor/module-catalog,

Magento2/app/design/frontend/{{Packagename}}/{{themename}}/Magento_Catalog/templates/

After insert template in above path and you can change your custom code related to view file.

Thanks.

Improve this answer
1
  • how to override from admin side? I need to override the product view of admin
    – Jafar Pinjar
    Commented Nov 8, 2018 at 6:00
0

First, create Module put etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0">
    </module>
</config>

Then create a registration.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__);

Find the xml file and native template files you have to override. Incase of PDP you can override the following files

view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
      <referenceBlock name="product.info">
        <action method="setTemplate">
            <argument name="template" xsi:type="string">Vendor_Module::product/view/form.phtml</argument>
        </action>
     </referenceBlock>
    </body>
</page>

change the block names and paths for different templates.

create the form.phtml and insert your modifications there.
view/frontend/templates/product/view/form.phtml

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1> write your code here</h1>
  </body>
</html>

usually we copy and paste the original template file and change it as we want.

Improve this answer

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.