2

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 Jan 29 '19 at 9:30
  • I want to customize like link – Siva Kumar Jan 29 '19 at 9:34
  • 1
    you need to move add to cart block right? – Aasim Goriya Jan 29 '19 at 9:35
  • I m new to magento 2. let plz tell me in detail how to move add to block right? – Siva Kumar Jan 29 '19 at 9:42
  • let me know in which place you want to move add to cart block – Aasim Goriya Jan 29 '19 at 9:43
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.

| improve this answer | |
  • I was tried but it was not happens prnt.sc/mdo2z6 – Siva Kumar Jan 29 '19 at 10:18
  • Can you please add your full code in your question ? – Aasim Goriya Jan 29 '19 at 10:27
  • see above a edited question – Siva Kumar Jan 29 '19 at 10:38
  • please check my updated ans. – Aasim Goriya Jan 29 '19 at 11:03
  • @SivaKumar I have just updated my ans and just seen that you have accepted someone else's ans. – Aasim Goriya Jan 29 '19 at 11:04
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

| improve this answer | |
0

In catalog_product_view.xml you have to add below code

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

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.