A product page design in E-commerce is important as a potential customer is going to search for the product and not a brand in most of the cases. Moreover, product pages are the ones that are going to be shared maximum on social media.
An eCommerce page design plays a significant role to create the right visual effect, generate lead and conversion.
Additionally, an easy to follow design can enhance the users’ shopping experience!
When it comes to Magento 2, while developing a store, you may need to tweak the design of the default pages. It is to optimize the page for the better shopping experience and intrigue the visitors to stay on the page. You can also move related products above product tabs in Magento 2.
Reorder product tabs in Magento 2 as shown below:
Before:
After:
Method to reorder product tabs in Magento 2
1. Create/change the file at
app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml
<referenceBlock name="product.info.details">
<referenceBlock name="product.info.description">
<arguments>
<argument name="priority" xsi:type="string">1</argument>
</arguments>
</referenceBlock>
<referenceBlock name="product.attributes">
<arguments>
<argument name="priority" xsi:type="string">3</argument>
</arguments>
</referenceBlock>
<referenceBlock name="reviews.tab">
<arguments>
<argument name="priority" xsi:type="string">4</argument>
</arguments>
</referenceBlock>
<!-- Your Custom Tab -->
<block class="Magento\Catalog\Block\Product\View\Description" name="product.features" as="features" template="product/view/features.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
<argument name="priority" xsi:type="string">2</argument>
</arguments>
</block>
</referenceBlock>
2. If details.phtml file does not exist in Theme directory then
copy from
vendor/magento-catalog-view/frontend/templates/product/view/details.phtml
to
app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/view/details.phtml
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<?php
# We create a new array;
$newPriority = array();
# forEach the original $detailedInfoGroup Array;
foreach ($detailedInfoGroup as $name){
$alias = $layout->getElementAlias($name);
# Get the priority which we applied via xml file
# If no priority is applied via xml file then just set it to 10
$priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '10';
# variables pushed into new two-dimensional array
array_push($newPriority, array($name, $priority));
}
# Sort array by priority
usort($newPriority, function($a, $b) {
return $a['1'] <=> $b['1'];
});
?>
<div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
<?php
# Delete the original forEach statement
#foreach ($detailedInfoGroup as $name)
foreach ($newPriority as $name):?>
<?php
# rename $name[0] to $name because it's a two-dimensional array
# No further changes to this file, it works as explained
$name = $name[0];
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
}
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item title"
aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"
data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
<a class="data switch"
tabindex="-1"
data-toggle="switch"
href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
<?php /* @escapeNotVerified */ echo $label; ?>
</a>
</div>
<div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
<?php /* @escapeNotVerified */ echo $html; ?>
</div>
<?php endforeach;?>
</div>
</div>
<?php endif; ?>
That’s it.
Change the order of the tabs on the product page in Magento 2 store. Tweak the design of the product page based on buyer persona and content relevancy.
Do share the solution with the fellow developers via social media.
Thank you.
