Magento 2产品页面标签重排求助：自定义标签需优先显示

Hey there! I’ve dealt with this exact Magento 2 product tab sorting issue before, so let’s walk through the most reliable ways to get your custom "Features", "In the box", and "Specifications" tabs to show up first, followed by the default "Details", "Reviews", and "Warranty Info" tabs.

Method 1: Adjust Layout XML (Theme-Level) #

This method works well if you’re using a custom theme and want to control the tab order directly via layout files.

Step 1: Locate Your Theme’s Catalog Product View Layout File #

Navigate to your active theme’s layout directory:

app/design/frontend/[Your_Vendor]/[Your_Theme]/Magento_Catalog/layout/catalog_product_view.xml

If the file doesn’t exist, create it.

Step 2: Reorder Tabs by Removing and Re-Adding Blocks #

Replace the existing product.info.details reference block with this code (adjust block names/classes to match your actual custom tabs):

<referenceBlock name="product.info.details">
    <!-- Remove all existing tabs first to reset the order -->
    <referenceBlock name="product.info.description" remove="true"/>
    <referenceBlock name="reviews.tab" remove="true"/>
    <referenceBlock name="warranty.info.tab" remove="true"/> <!-- Update this to your actual Warranty Info block name -->
    <referenceBlock name="features.tab" remove="true"/> <!-- Update to your custom Features block name -->
    <referenceBlock name="in_the_box.tab" remove="true"/> <!-- Update to your custom "In the box" block name -->
    <referenceBlock name="specification.tab" remove="true"/> <!-- Update to your custom Specifications block name -->

    <!-- Add custom tabs FIRST in your desired order -->
    <block class="Magento\Catalog\Block\Product\View\Description" name="features.tab" as="features" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getFeatures</argument>
            <argument name="at_code" xsi:type="string">features</argument>
            <argument name="css_class" xsi:type="string">features</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">Features</argument>
        </arguments>
    </block>

    <block class="Magento\Catalog\Block\Product\View\Description" name="in_the_box.tab" as="in_the_box" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getInTheBox</argument>
            <argument name="at_code" xsi:type="string">in_the_box</argument>
            <argument name="css_class" xsi:type="string">in_the_box</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">In the box</argument>
        </arguments>
    </block>

    <block class="Magento\Catalog\Block\Product\View\Description" name="specification.tab" as="specification" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getSpecification</argument>
            <argument name="at_code" xsi:type="string">specification</argument>
            <argument name="css_class" xsi:type="string">specification</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">Specifications</argument>
        </arguments>
    </block>

    <!-- Add default tabs AFTER custom ones -->
    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" as="description" template="Magento_Catalog::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\Review\Block\Product\View" name="reviews.tab" as="reviews" template="Magento_Review::product/view/tab.phtml" group="detailed_info">
        <arguments>
            <argument name="title" translate="true" xsi:type="string">Reviews</argument>
        </arguments>
    </block>

    <block class="[Your_Vendor]\[Your_Module]\Block\Product\View\Warranty" name="warranty.info.tab" as="warranty_info" template="[Your_Vendor]_[Your_Module]::product/view/warranty.phtml" group="detailed_info">
        <arguments>
            <argument name="title" translate="true" xsi:type="string">Warranty Info</argument>
        </arguments>
    </block>
</referenceBlock>

Key Notes: #

• Replace [Your_Vendor], [Your_Theme], and block class names with your actual values.
• If your custom tabs were added via a third-party module, use the exact block names from that module’s layout files.

Method 2: Use an Interceptor (Plugin) - More Reliable for Complex Setups #

If layout XML overrides aren’t working (due to conflicting modules/themes), a plugin lets you programmatically reorder tabs.

Step 1: Create a Custom Module (If You Don’t Have One) #

First, set up a basic module (e.g., Vendor/ProductTabs) with the necessary registration and module files.

Step 2: Register the Plugin #

Create etc/frontend/di.xml in your module:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Block\Product\View\Details">
        <plugin name="vendor_producttabs_reorder_tabs" type="Vendor\ProductTabs\Plugin\Block\Product\View\Details"/>
    </type>
</config>

Step 3: Build the Plugin Class #

Create Plugin/Block/Product/View/Details.php in your module:

<?php
namespace Vendor\ProductTabs\Plugin\Block\Product\View;

class Details
{
    /**
     * Reorder product tabs to prioritize custom tabs first
     *
     * @param \Magento\Catalog\Block\Product\View\Details $subject
     * @param array $result
     * @return array
     */
    public function afterGetGroupSortedChildNames(\Magento\Catalog\Block\Product\View\Details $subject, $result)
    {
        // List the "as" aliases of your custom tabs (from layout XML)
        $priorityTabAliases = ['features', 'in_the_box', 'specification'];
        $sortedTabs = [];

        // Move priority tabs to the front
        foreach ($priorityTabAliases as $alias) {
            if (($key = array_search($alias, $result)) !== false) {
                $sortedTabs[] = $alias;
                unset($result[$key]);
            }
        }

        // Append the remaining default tabs
        return array_merge($sortedTabs, $result);
    }
}

Key Notes: #

• Make sure $priorityTabAliases matches the as attributes of your custom tabs in the layout XML.
• This method bypasses layout conflicts because it modifies the tab order directly in the block logic.

Final Steps After Implementing Either Method #

1. Clear Magento Cache:

   bin/magento cache:clean
   bin/magento cache:flush
   

2. Test on the Frontend: Navigate to a product page to verify the tab order is now: Features → In the box → Specifications → Details → Reviews → Warranty Info.

If you’re still having trouble, use this command to dump the current product layout and check tab block names/aliases:

bin/magento dev:layout:dump catalog_product_view

内容的提问来源于stack exchange，提问作者Dacod