WooCommerce自定义相关产品分组定义及单产品页展示实现咨询

以下方案可同时满足后台配置、前台展示两项需求，代码可直接复用：

一、后台添加自定义关联产品分组配置项 #

功能效果和upsells、cross-sells操作逻辑完全一致，支持搜索选择多个产品：

1. 先添加分组选择字段到产品数据的「关联产品」标签页

// 给产品数据关联标签页插入自定义分组字段
add_action( 'woocommerce_product_options_related', 'add_custom_related_groups' );
function add_custom_related_groups() {
    global $post;
    echo '<div class="options_group">';

    // 配件分组
    woocommerce_wp_select( array(
        'id'            => '_accessories_ids',
        'label'         => 'Accessories（配件）',
        'description'   => '选择关联的配件类产品',
        'class'         => 'wc-product-search',
        'multiple'      => true,
        'options'       => array(),
        'value'         => get_post_meta( $post->ID, '_accessories_ids', true ) ? : array(),
    ) );

    // 备件分组
    woocommerce_wp_select( array(
        'id'            => '_spare_parts_ids',
        'label'         => 'Spare Parts（备件）',
        'description'   => '选择关联的备件类产品',
        'class'         => 'wc-product-search',
        'multiple'      => true,
        'options'       => array(),
        'value'         => get_post_meta( $post->ID, '_spare_parts_ids', true ) ? : array(),
    ) );

    // 附加套件分组
    woocommerce_wp_select( array(
        'id'            => '_additional_kits_ids',
        'label'         => 'Additional Kits（附加套件）',
        'description'   => '选择关联的附加套件类产品',
        'class'         => 'wc-product-search',
        'multiple'      => true,
        'options'       => array(),
        'value'         => get_post_meta( $post->ID, '_additional_kits_ids', true ) ? : array(),
    ) );

    echo '</div>';
}

2. 新增保存配置的逻辑

// 保存自定义关联产品配置
add_action( 'woocommerce_process_product_meta', 'save_custom_related_groups' );
function save_custom_related_groups( $post_id ) {
    // 保存配件ID
    $accessories = isset( $_POST['_accessories_ids'] ) ? array_map( 'intval', $_POST['_accessories_ids'] ) : array();
    update_post_meta( $post_id, '_accessories_ids', $accessories );

    // 保存备件ID
    $spare_parts = isset( $_POST['_spare_parts_ids'] ) ? array_map( 'intval', $_POST['_spare_parts_ids'] ) : array();
    update_post_meta( $post_id, '_spare_parts_ids', $spare_parts );

    // 保存附加套件ID
    $additional_kits = isset( $_POST['_additional_kits_ids'] ) ? array_map( 'intval', $_POST['_additional_kits_ids'] ) : array();
    update_post_meta( $post_id, '_additional_kits_ids', $additional_kits );
}

二、前端商品详情页渲染关联产品 #

默认展示在商品详情页底部默认关联产品区域之后，复用主题自带的产品卡片样式：

// 前台输出自定义关联产品分组
add_action( 'woocommerce_after_single_product_summary', 'render_custom_related_groups', 25 );
function render_custom_related_groups() {
    global $product;
    $product_id = $product->get_id();

    // 分组配置，可自行增删修改
    $groups = [
        '_accessories_ids' => 'Accessories（配件）',
        '_spare_parts_ids' => 'Spare Parts（备件）',
        '_additional_kits_ids' => 'Additional Kits（附加套件）',
    ];

    foreach ( $groups as $meta_key => $title ) {
        $related_ids = get_post_meta( $product_id, $meta_key, true );
        if ( empty( $related_ids ) ) continue;

        // 查询有效产品
        $query = new WP_Query( [
            'post_type' => 'product',
            'posts_per_page' => -1,
            'post__in' => $related_ids,
            'post_status' => 'publish',
        ] );

        if ( $query->have_posts() ) :
            echo '<section class="custom-related-group ' . sanitize_title( $title ) . '">';
            echo '<h2>' . esc_html( $title ) . '</h2>';
            woocommerce_product_loop_start();
            while ( $query->have_posts() ) : $query->the_post();
                wc_get_template_part( 'content', 'product' );
            endwhile;
            woocommerce_product_loop_end();
            echo '</section>';
        endif;
        wp_reset_postdata();
    }
}

注意事项 #

• 以上所有代码添加到当前主题的functions.php文件，或自定义插件的代码文件中即可生效
• 若需要调整前端展示位置，修改add_action第三个参数的优先级数值即可，数值越小展示位置越靠前
• 可通过给.custom-related-group类添加自定义CSS调整展示样式

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