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 at 9:30
  • I want to customize like link – Siva Kumar Jan 29 at 9:34
  • 1
    you need to move add to cart block right? – Aasim Goriya Jan 29 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 at 9:42
  • let me know in which place you want to move add to cart block – Aasim Goriya Jan 29 at 9:43
1

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.

  • I was tried but it was not happens prnt.sc/mdo2z6 – Siva Kumar Jan 29 at 10:18
  • Can you please add your full code in your question ? – Aasim Goriya Jan 29 at 10:27
  • see above a edited question – Siva Kumar Jan 29 at 10:38
  • please check my updated ans. – Aasim Goriya Jan 29 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 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

0

In catalog_product_view.xml you have to add below code

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

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.