How to customize a product details page in magento2?

Question

In magento 2 how to customize a product detail page in custom theme.

app/design/frontend/companyname/themename/Magento_Catalog/layout/catalog_product_view.xml

      <?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
      <css src="mage/gallery/gallery.css" />
   </head>
   <update handle="catalog_product_opengraph" />
   <update handle="page_calendar" />
   <body>
      <attribute name="itemtype" value="http://schema.org/Product" />
      <attribute name="itemscope" value="itemscope" />
      <referenceBlock name="head.components">
         <block class="Magento\Framework\View\Element\Js\Components" name="checkout_page_head_components" template="Magento_Catalog::js/components.phtml" />
      </referenceBlock>
      <referenceBlock name="page.main.title">
         <arguments>
            <argument name="css_class" xsi:type="string">product</argument>
            <argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument>
         </arguments>
      </referenceBlock>
      <referenceBlock name="root">
         <arguments>
            <argument name="add_attribute" xsi:type="string">itemscope itemtype="http://schema.org/Product"</argument>
         </arguments>
      </referenceBlock>
      <referenceContainer name="content">
         <container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="-">
            <container name="product.info.price" label="Product info auxiliary container" htmlTag="div" htmlClass="product-info-price" after="product.info.review">
               <container name="product.info.stock.sku" label="Product auxiliary info" htmlTag="div" htmlClass="product-info-stock-sku">
                  <container name="product.info.type" before="-" />
                  <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type">
                     <arguments>
                        <argument name="at_call" xsi:type="string">getSku</argument>
                        <argument name="at_code" xsi:type="string">sku</argument>
                        <argument name="css_class" xsi:type="string">sku</argument>
                        <argument name="at_label" xsi:type="string">default</argument>
                        <argument name="add_attribute" xsi:type="string">itemprop="sku"</argument>
                     </arguments>
                  </block>
               </container>
               <block class="Magento\Catalog\Block\Product\View" name="product.info.review" template="product/view/review.phtml" after="product.info.stock.sku" />
               <block class="Magento\Catalog\Pricing\Render" name="product.price.final" after="product.info.sku">
                  <arguments>
                     <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                     <argument name="price_type_code" xsi:type="string">final_price</argument>
                     <argument name="zone" xsi:type="string">item_view</argument>
                  </arguments>
               </block>
            </container>
            <block class="Magento\Catalog\Pricing\Render" name="product.price.tier" after="product.info.price">
               <arguments>
                  <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                  <argument name="price_type_code" xsi:type="string">tier_price</argument>
                  <argument name="zone" xsi:type="string">item_view</argument>
               </arguments>
            </block>
            <container name="alert.urls" as="alert_urls" label="Alert Urls" after="product.price.tier" />
            <block class="Magento\Catalog\Block\Product\View" name="product.info" template="product/view/form.phtml" after="alert.urls">
               <container name="product.info.form.content" as="product_info_form_content">
                  <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="product/view/addtocart.phtml" />
               </container>
               <block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
                  <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="product/view/options/wrapper.phtml">
                     <block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="product/view/options.phtml">
                        <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" as="default" template="product/view/options/type/default.phtml" />
                        <block class="Magento\Catalog\Block\Product\View\Options\Type\Text" as="text" template="product/view/options/type/text.phtml" />
                        <block class="Magento\Catalog\Block\Product\View\Options\Type\File" as="file" template="product/view/options/type/file.phtml" />
                        <block class="Magento\Catalog\Block\Product\View\Options\Type\Select" as="select" template="product/view/options/type/select.phtml" />
                        <block class="Magento\Catalog\Block\Product\View\Options\Type\Date" as="date" template="product/view/options/type/date.phtml" />
                     </block>
                     <block class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml" />
                  </block>
                  <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="product/view/options/wrapper/bottom.phtml">
                     <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="product/view/addtocart.phtml" />
                  </block>
               </block>
            </block>
            <container name="product.info.extrahint" as="extrahint" label="Product View Extra Hint">
               <container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-social-links" after="product.info.overview">
                  <block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="product/view/addto.phtml">
                     <block class="Magento\Catalog\Block\Product\View\AddTo\Compare" name="view.addto.compare" after="view.addto.wishlist" template="Magento_Catalog::product/view/addto/compare.phtml" />
                  </block>
                  <block class="Magento\Catalog\Block\Product\View" name="product.info.mailto" template="product/view/mailto.phtml" />
               </container>
            </container>
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.overview" template="product/view/attribute.phtml" group="detailed_info" after="product.info.extrahint">
               <arguments>
                  <argument name="at_call" xsi:type="string">getShortDescription</argument>
                  <argument name="at_code" xsi:type="string">short_description</argument>
                  <argument name="css_class" xsi:type="string">overview</argument>
                  <argument name="at_label" translate="true" xsi:type="string">none</argument>
                  <argument name="title" translate="true" xsi:type="string">Overview</argument>
                  <argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
               </arguments>
            </block>
         </container>
         <container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
            <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="product/view/gallery.phtml" />
         </container>
         <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="product.info.media">
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
               <arguments>
                  <argument name="at_call" xsi:type="string">getDescription</argument>
                  <argument name="at_code" xsi:type="string">description</argument>
                  <argument name="css_class" xsi:type="string">description</argument>
                  <argument name="at_label" xsi:type="string">none</argument>
                  <argument name="title" translate="true" xsi:type="string">Details</argument>
               </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
               <arguments>
                  <argument translate="true" name="title" xsi:type="string">More Information</argument>
               </arguments>
            </block>
         </block>
         <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
            <arguments>
               <argument name="triggers" xsi:type="array">
                  <item name="compareProductLink" xsi:type="string">.action.tocompare</item>
               </argument>
            </arguments>
         </block>
      </referenceContainer>
      <referenceContainer name="content.aside">
         <block class="Magento\Catalog\Block\Product\ProductList\Related" name="catalog.product.related" template="Magento_Catalog::product/list/items.phtml">
            <arguments>
               <argument name="type" xsi:type="string">related</argument>
            </arguments>
            <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="related.product.addto" as="addto">
               <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare" name="related.product.addto.compare" as="compare" template="Magento_Catalog::product/list/addto/compare.phtml" />
            </block>
         </block>
         <block class="Magento\Catalog\Block\Product\ProductList\Upsell" name="product.info.upsell" template="Magento_Catalog::product/list/items.phtml">
            <arguments>
               <argument name="type" xsi:type="string">upsell</argument>
            </arguments>
            <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="upsell.product.addto" as="addto">
               <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare" name="upsell.product.addto.compare" as="compare" template="Magento_Catalog::product/list/addto/compare.phtml" />
            </block>
         </block>
         <block class="Magento\Catalog\Block\Product\View\Additional" name="product.info.additional" as="product_additional_data" />
      </referenceContainer>
      <referenceBlock name="product.info.addtocart">
         <block class="Magento\Catalog\Block\ShortcutButtons\InCatalog" name="addtocart.shortcut.buttons" />
      </referenceBlock>
      <referenceBlock name="product.info.addtocart.additional">
         <block class="Magento\Catalog\Block\ShortcutButtons\InCatalog" name="addtocart.shortcut.buttons.additional" />
      </referenceBlock>
   </body>
</page>

app/design/frontend/companyname/themename/Magento_Catalog/templates/addtocart.phtml

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

// @codingStandardsIgnoreFile

/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>
<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()): ?>
        <div class="field qty">
            <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
            <div class="control">
                <input type="number"
                       name="qty"
                       id="qty"
                       maxlength="12"
                       value="<?php /* @escapeNotVerified */ echo $block->getProductDefaultQty() * 1 ?>"
                       title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"
                       data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
            </div>
        </div>
        <?php endif; ?>
        <div class="actions">
            <button type="submit"
                    title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
                    class="action primary tocart"
                    id="product-addtocart-button">
                <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
            </button>
            <?php echo $block->getChildHtml('', true) ?>
        </div>


    </div>
</div>
<?php endif; ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            }
        }
    }
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "catalogAddToCart": {
                "bindSubmit": false
            }
        }
    }
</script>
<?php endif; ?>

@shiva please let me know what do you want to customize on product detail page ? — Aasim Goriya, Commented Jan 29, 2019 at 9:30
I m new to magento 2. let plz tell me in detail how to move add to block right? — Siva Kumar, Commented Jan 29, 2019 at 9:42
let me know in which place you want to move add to cart block — Aasim Goriya, Commented Jan 29, 2019 at 9:43

Aasim Goriya · Accepted Answer · 2019-01-30 04:49:26Z

2

Go to your catalog_product_view.xml from this path /app/design/frontend/Magento/luma/Magento_Catalog/layout/catalog_product_view.xml

For Single product : add this code in your file

<move element="product.info.social" destination="product.info.addtocart" after="-"/>

For Configurable product : add this code in your file > /app/design/frontend/Magento/luma/Magento_Catalog/layout/catalog_product_view_type_configurable.xml

<move element="product.info.social" destination="product.info.addtocart.additional" after="-"/>

then check after clear your cache using cache commands.

edited Jan 30, 2019 at 4:49

answered Jan 29, 2019 at 9:58

Aasim Goriya

5,4542 gold badges28 silver badges53 bronze badges

I was tried but it was not happens prnt.sc/mdo2z6
– Siva Kumar
Commented Jan 29, 2019 at 10:18
Can you please add your full code in your question ?
– Aasim Goriya
Commented Jan 29, 2019 at 10:27
see above a edited question
– Siva Kumar
Commented Jan 29, 2019 at 10:38
please check my updated ans.
– Aasim Goriya
Commented Jan 29, 2019 at 11:03
@SivaKumar I have just updated my ans and just seen that you have accepted someone else's ans.
– Aasim Goriya
Commented Jan 29, 2019 at 11:04

| Show 10 more comments

Hiren · Accepted Answer · 2019-01-29 11:05:03Z

0

You can customize a product detail page by overriding catalog_product_view.xml

for remove an element use

<referenceBlock name="name-of-element" remove="true" />

for moving an element use

<move element="name-of-element" destination=""/>

For advanced customization you need to override relevant template files, Go to STORES -> ADVANCED -> DEVELOPER -> DEBUG and Enable 'Template Path' now you can know the template path of each element, you can override required file in your custom theme for customization

-- EDIT --

<referenceContainer name="content">
<referenceContainer name="product.info.main">
    <container name="custom.info" htmlTag="div" htmlClass="product-action" after="product.info.price" />

    <move element="product.info.addtocart" destination="custom.info"/>
    <move element="product.info.social" destination="custom.info" after="product.info.addtocart"/>
</referenceContainer>

For same design as per your requirement you need to do it by CSS

edited Jan 29, 2019 at 11:05

answered Jan 29, 2019 at 9:08

Hiren

1,0918 silver badges29 bronze badges

how to customize like this prnt.sc/mdne8o
– Siva Kumar
Commented Jan 29, 2019 at 9:38
Please check edit @SivaKumar
– Hiren
Commented Jan 29, 2019 at 11:05
ok i will check and tell you @user4536
– Siva Kumar
Commented Jan 29, 2019 at 11:08
1

for qty input you can refer mirasvit.com/blog/…
– Hiren
Commented Jan 29, 2019 at 11:12
its not move a element @user4536
– Siva Kumar
Commented Jan 29, 2019 at 11:37

Add a comment |

Divya Sekar · Accepted Answer · 2019-01-29 11:52:23Z

0

In catalog_product_view.xml you have to add below code

      <move element="view.addto.compare" 
      destination="product.info.addtocart" after="-"/>

edited Jan 29, 2019 at 11:52

answered Jan 29, 2019 at 10:55

Divya Sekar

1,2951 gold badge24 silver badges79 bronze badges

I want to add cms block to "above product description" section, how to do that? thanks @Divya Sekar
– zus
Commented Jan 12, 2021 at 11:19

Add a comment |

Stack Exchange Network

How to customize a product details page in magento2?

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2
magento2.2
product-view
or ask your own question.

Hot Network Questions

How to customize a product details page in magento2?

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento2magento2.2product-view or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2
magento2.2
product-view
or ask your own question.