designlayoutmagento2
In product page, product details tab appear below the images gallery along the full width of screen. Related products appear below the details tabs.
If details are moved to the right column (below the 'Add to cart' button), the related products block shrinks half screen.
How to make the related products block remain full width of screen?
You should change your layout file catalog.xml:
Was:
<block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>
Should be:
<block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml">
<block type="catalog/product_list_related" name="catalog.product.related" before="-" template="catalog/product/list/related.phtml"/>
</block>
Your code should work then.
In case you have getChildHtml('') block you should create block in addtocart.phtml template:
<?php $_product = $this->getProduct(); ?>
<?php $buttonTitle = $this->__('Add to Cart'); ?>
<?php echo $this->getLayout()->createBlock('catalog/product_list_related')->setTemplate('catalog/product/list/related.phtml')->toHtml() ?>
<?php if($_product->isSaleable()): ?>
<div class="add-to-cart">
<?php if(!$_product->isGrouped()): ?>
<label for="qty"><?php echo $this->__('Qty:') ?></label>
<input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<?php endif; ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>
<?php echo $this->getChildHtml('', true, true) ?>
</div>
<?php endif; ?>
We should take a look at: vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml line 103 ~ 118
<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">
......
</block>
All tabs are inside the product.info.details element and belong to group detailed_info. The add-to-cart element belongs to product_options_wrapper_bottom element. We need to rearrange these elements. To do this, add the extending catalog_product_view.xml in the app/design/frontend/{Vendor Theme}/{Theme Name}/Magento_Catalog/layout/ directory:
#app/design/frontend/{Vendor Theme}/{Theme Name}/Magento_Catalog/layout/catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<move element="product.info.details" destination="product.info.main" after="product_options_wrapper_bottom"/>
</body>
</page>
Here is the result:
You can read more here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_rearrange
Best Answer
A quick fix is to set the CSS property
clear: rightfor the upsell products block.I still would like to understand why the upsell products block shrinks to half screen when details tabs
product.info.detailsare moved to theproduct.info.mainblock.