Magento – How to change layout of product detail page

formatlayoutmagento2

I've set up a child theme of Luma and want to change the layout of my individual product detail page. What file controls this? I don't see the .phtml file and don't see how changing block order in my xml will accomplish what I need to do.

Best Answer

To change the layout of individual product detail page, as you have created the child theme assuming your child theme path is something like this

magento_root/app/design/frontend/company_name/theme_name/

Now navigate to your child theme and follow these steps.

  1. Create a folder Magento_Catalog and inside it create another folder layout, so the path now looks like this (magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout).
  2. Copy your xml file from magento_root/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
    • Do not edit this as this is core file.
  3. Paste the xml file under magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout/ now edit this as required.
  4. Create the following path magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view
  5. Go to magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/ where all .phtml files are located which gets required data into product details page.
  6. Copy the required .phtml files from core folder(magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/) to your child theme folder(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view) and edit them as required.

Hope this helps your question.

Related Topic