如何在WooCommerce中合并描述与附加信息标签并实现两栏布局？

Absolutely! You can pull this off by adding custom code to your theme's functions.php file (pro tip: use a child theme instead of your parent theme to keep changes safe through theme updates). Here's a complete, tested solution tailored to your needs:

Step 1: Remove the Default Additional Info Tab #

First, we'll hide the original "Additional Information" tab since we're merging its content into the Description tab:

// Remove Additional Information tab
add_action( 'woocommerce_product_tabs', 'remove_additional_info_tab', 98 );
function remove_additional_info_tab( $tabs ) {
    unset( $tabs['additional_information'] );
    return $tabs;
}

Step 2: Merge Additional Info into the Description Tab #

Next, we'll modify the Description tab's content to include the Additional Information section, wrapped in container divs for easy layout control:

// Merge Additional Info into Description tab
add_filter( 'woocommerce_product_description_tab_content', 'merge_additional_info_into_description', 10, 2 );
function merge_additional_info_into_description( $content, $product ) {
    // Capture the Additional Information HTML output
    ob_start();
    wc_display_product_attributes( $product );
    $additional_info = ob_get_clean();

    // Wrap both sections in a two-column container
    $merged_content = '
    <div class="product-description-columns">
        <div class="column-description">
            ' . $content . '
        </div>
        <div class="column-additional-info">
            <h2>' . __( 'Additional Information', 'woocommerce' ) . '</h2>
            ' . $additional_info . '
        </div>
    </div>';

    return $merged_content;
}

Step 3: Add CSS for Responsive Two-Column Layout #

Finally, add this CSS to style the columns (we'll inject it directly via functions.php for convenience):

// Enqueue custom CSS for two-column layout
add_action( 'wp_enqueue_scripts', 'product_description_columns_css' );
function product_description_columns_css() {
    wp_add_inline_style( 'woocommerce-general', '
        .product-description-columns {
            display: flex;
            gap: 3rem;
            margin-top: 1.5rem;
        }
        .column-description, .column-additional-info {
            flex: 1;
            min-width: 300px;
        }
        @media (max-width: 768px) {
            .product-description-columns {
                flex-direction: column;
                gap: 2rem;
            }
        }
    ' );
}

Quick Breakdown: #

• We first remove the standalone Additional Information tab from the tab navigation.
• Then we capture the HTML of the product attributes (the Additional Info content) and insert it into the Description tab, wrapped in a flex container.
• The CSS creates a responsive layout: side-by-side columns on desktop, stacked vertically on mobile for better mobile usability.

Important Notes: #

• Always use a child theme when editing functions.php—parent theme updates will overwrite your custom code otherwise.
• Clear your site and browser cache after adding the code to see changes right away.
• Tweak the gap and min-width values in the CSS to match your theme's design system.

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