不管是水平（更常见）还是垂直，选项卡都是通过将大量内容组织成易于消化的数据块来避免信息过载的好方法。完成后，他们提供所有信息（与一个特定主题相关）而不会让用户感到压力，允许他们通过一次只显示一个标签中的数据来快速浏览内容。从UX角度来看，选项卡的主要目的是简单方便访问信息，并且它们对您的SEO和网站排名没有任何负面影响也很有帮助。
Magento与大多数其他电子商务平台一样，在产品页面上使用选项卡导航来显示各种产品信息和数据。默认情况下，这对于Luma和Blank主题是一样的，在产品页面上有三个选项卡：
- 详细信息有关产品，即说明
- 更多信息存储产品属性和值
- 评论通过的产品采购商和消费者提供
这些选项卡可以很容易的定制，我们会向您展示怎样做，但是在我们开始之前，让我们花一些时间来探索并找出我们实际要定制的模板和布局文件。一种方法是启用模板路径提示并通过Magento后台将块名称添加到提示：
Stores => Configuration => Advanced => Developer => Debug
虽然这些调试设置用处不大，但至少现在我们知道哪些Magento模块（提示：module-catalog）负责产品信息选项卡，这便于我们可以开始自定义，让我们轻松的开始吧。
重命名产品选项卡
为了重命名我们的选项卡，我们必须覆盖vendor/module_catalog文件夹内的catalog_product_view.xml布局文件。标准（Magento）方法是，在我们的主题范围内创建新的与base下完全相同的布局文件。
我们的文件路径应如下所示：app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml
我们文件中的代码如下：
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.details">
<referenceBlock name="product.info.description">
<arguments>
<argument name="title" translate="true" xsi:type="string">Description</argument>
</arguments>
</referenceBlock>
</referenceBlock>
</body>
</page>如果我们分析上面的代码，我们将看到第一个布局处理标签
<referenceBlock name =“product.info.details”>作为整体引用我们的产品选项卡式导航，而子标签<referenceBlock name =“product.info.description” >参考单个选项卡，在我们的案例详细信息选项卡使用<argument name =“title”translate =“true”xsi：type =“string”>我们只需为选项卡设置新标题。<arguments>是一个（必需的）容器，它没有自己的属性。
删除产品标签
这里更简单，我们只需要引用我们的目标块并将remove属性设置为true。所以我们catalog_product_view.xml看起来像这样：
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.review" remove="true" />
</body>
</page>添加自定义标签
现在，假设我们要在产品信息选项卡中创建一个额外的选项卡，并用内容（例如某个特定属性的值）填充它。出于演示目的，假设我们的新选项卡中将包含有关产品包装的信息。
首先，从Magento后台，我们将创建新属性，将它命名为Packaging并添加到default属性集。
接下来，我们将：
- 创建新的模板文件并命名为packaging-content.phtml
- 保存到：app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/view/
- 粘贴以下代码：
<?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();
if ($_attributeLabel && $_attributeLabel == 'default') {
$_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
$_attributeValue = $_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);
?>
<?php if ($_attributeValue): ?>
<div class="packaging-content" <?php echo $_attributeAddAttribute;?>>
<?php echo $_attributeValue; ?>
</div>
<?php endif; ?>N.B.属性集（从第一步）必须匹配IF语句中的字符串值（line: 9）
第三步也是最后一步是在我们的布局文件catalog_product_view.xml中放置以下代码：
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View\Description" name="packaging-content" template="Magento_Catalog::product/view/packaging-content.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getPackaging</argument>
<argument name="at_code" xsi:type="string">packaging</argument>
<argument name="css_class" xsi:type="string">packaging</argument>
<argument name="at_label" xsi:type="string”>packaging</argument>
<argument name="add_attribute" xsi:type="string">itemprop="packaging"</argument>
<argument name="title" translate="true" xsi:type="string">Packaging content</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>在选项卡中添加相关产品
对于添加相关产品，我们还需要两个文件，模板和布局：
我们的模板文件，我们将其命名related-products.phtml并保存在app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/其中只有一行代码：
<?php echo $this->getBlockHtml('catalog.product.related'); ?>我们的布局文件catalog_product_view.xml代码如下所示：
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!— 1st Code Block: Get Related Products as new tab -->
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="Magento_Catalog::product/related-products.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">Related Products</argument>
</arguments>
</block>
</referenceBlock>
<!— 2nd Code Block: Move original block to product info tabs -->
<move element="catalog.product.related" destination="product.info.details" />
</body>
</page>第一个代码块是设置带有相关产品的新选项卡，第二个代码块用于从布局流程中删除原始块。
以类似的方式，这也可以用于显示追加销售的产品，我们需要做的就是将我们的模板（我们可以将其命名upsell-products.phtml）文件更改为：
<?php echo $this->getBlockHtml('product.info.upsell'); ?>并在我们的布局中更改：
- 模板文件的名称为upsell-products.phtml（line:6）
- 我们的标签的标题为“你可能感兴趣”或类似的东西（line:8）
- 元素属性为product.info.upsell（line:14）
