如何用自定义HTML输出单个产品的在售关联产品？

嘿，我来帮你搞定这个自定义关联产品HTML输出的问题！咱们一步步拆解，从获取关联产品到自定义输出全给你理清楚：

1. 先拿到当前产品的关联产品ID #

WooCommerce里的关联产品分三类，你可以根据需求选对应的获取方式：

• 自动关联产品：基于分类、标签自动匹配的，用wc_get_related_products()拿ID数组
• 交叉销售：手动设置的购物车页关联产品，用$product->get_cross_sell_ids()
• 追加销售：手动设置的产品详情页升级产品，用$product->get_upsell_ids()

示例代码：

// 先获取当前产品对象（产品详情页直接可用）
global $product;
if ( ! $product ) return;

// 按需选一种关联产品ID集合
$related_product_ids = wc_get_related_products( $product->get_id() ); // 自动关联
// $related_product_ids = $product->get_cross_sell_ids(); // 交叉销售
// $related_product_ids = $product->get_upsell_ids(); // 追加销售

2. 用WP_Query筛选仅在售的产品 #

接下来构建查询参数，只拉取在售状态的关联产品，核心是通过meta_query过滤_stock_status为instock的产品：

$args = array(
    'post_type'      => 'product', // 限定只查产品类型
    'post__in'       => $related_product_ids, // 只查咱们拿到的关联产品ID
    'posts_per_page' => -1, // 显示所有符合条件的产品
    'post_status'    => 'publish', // 仅已发布的产品
    'meta_query'     => array(
        array(
            'key'     => '_stock_status',
            'value'   => 'instock',
            'compare' => '='
        )
    )
);

$related_products_query = new WP_Query( $args );

3. 提取所需字段/术语，输出自定义HTML #

在循环里，你可以通过WooCommerce产品对象或WordPress原生函数获取所有需要的内容，然后自由拼接HTML：

• 基础字段：标题、链接、价格、缩略图、SKU
• 术语：产品分类（product_cat）、产品标签（product_tag）

完整示例代码：

if ( $related_products_query->have_posts() ) :
    // 自定义外层容器
    echo '<div class="custom-related-products grid-layout">';
    
    while ( $related_products_query->have_posts() ) : $related_products_query->the_post();
        // 获取当前循环的产品对象
        $current_product = wc_get_product( get_the_ID() );
        
        // 提取核心字段
        $product_title = get_the_title();
        $product_link  = get_permalink();
        $product_price = $current_product->get_price_html(); // 带格式化的价格（含促销价样式）
        $product_image = get_the_post_thumbnail( get_the_ID(), 'woocommerce_thumbnail' ); // 产品缩略图
        $product_sku   = $current_product->get_sku(); // 产品SKU
        
        // 提取产品分类术语
        $product_cats = get_the_terms( get_the_ID(), 'product_cat' );
        // 提取产品标签术语
        $product_tags = get_the_terms( get_the_ID(), 'product_tag' );
        
        // 自定义产品卡片HTML
        echo '<div class="custom-product-card">';
            echo '<a href="' . esc_url( $product_link ) . '" class="product-img-wrap">';
                echo $product_image;
            echo '</a>';
            
            echo '<div class="product-content">';
                echo '<h4 class="product-name"><a href="' . esc_url( $product_link ) . '">' . esc_html( $product_title ) . '</a></h4>';
                echo '<div class="product-price">' . $product_price . '</div>';
                
                if ( $product_sku ) {
                    echo '<div class="product-sku-label">SKU: ' . esc_html( $product_sku ) . '</div>';
                }
                
                // 输出产品分类
                if ( $product_cats && ! is_wp_error( $product_cats ) ) {
                    echo '<div class="product-cats">';
                        echo '<span class="small-label">所属分类:</span>';
                        foreach ( $product_cats as $cat ) {
                            echo '<span class="cat-tag">' . esc_html( $cat->name ) . '</span>';
                        }
                    echo '</div>';
                }
            echo '</div>';
        echo '</div>';
    endwhile;
    
    echo '</div>';
    // 重置查询，避免影响后续页面内容的循环
    wp_reset_postdata();
endif;

几个关键提醒 #

• 安全第一：一定要用esc_url()、esc_html()转义输出内容，防止XSS攻击
• 灵活扩展：通过wc_get_product()拿到产品对象后，还能调用get_regular_price()、get_sale_price()等方法获取更细粒度的价格数据
• 自定义字段：如果需要产品的自定义字段，直接用get_post_meta( get_the_ID(), '你的自定义字段键', true )就能拿到

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