WooCommerce技术问询：如何通过商品ID获取商品卡片HTML代码

WooCommerce并没有内置你示例中那样直接获取商品卡片HTML的函数，但可以通过以下两种方式实现需求：

方法一：利用WooCommerce内置模板生成（样式与站点统一） #

WooCommerce的商品卡片通常由content-product.php模板渲染，你可以通过wc_get_template_html函数加载该模板并获取HTML内容，这样生成的卡片样式会和你站点上的商品列表保持一致：

$product_id = 42;
$target_product = wc_get_product($product_id);

if ($target_product) {
    // 暂存全局商品变量，避免干扰其他逻辑
    global $product;
    $original_global_product = $product;
    $product = $target_product;

    // 加载商品卡片模板并返回HTML
    $html = wc_get_template_html('content-product.php', array(
        'product' => $target_product,
        'columns' => 4, // 可选：根据布局设置列数，对应模板中的布局逻辑
        'loop' => 'custom_async' // 可选：标记循环场景，方便模板做差异化处理
    ));

    // 恢复全局商品变量
    $product = $original_global_product;
}

方法二：自定义HTML结构（高度定制化） #

如果需要完全脱离默认模板的限制，你可以自己编写函数构建商品卡片的HTML，按需添加或移除元素：

function get_custom_product_card_html($product_id) {
    $product = wc_get_product($product_id);
    if (!$product) return '';

    // 获取商品核心数据
    $title = esc_html($product->get_name());
    $price_html = $product->get_price_html();
    $permalink = esc_url($product->get_permalink());
    $image_src = wp_get_attachment_image_src(get_post_thumbnail_id($product_id), 'woocommerce_thumbnail');
    $image_url = $image_src ? $image_src[0] : wc_placeholder_img_src();
    $add_to_cart_url = esc_url($product->add_to_cart_url());
    $add_to_cart_text = esc_html($product->add_to_cart_text());

    // 输出HTML（使用输出缓冲捕获内容）
    ob_start();
    ?>
    <div class="custom-product-card">
        <a href="<?php echo $permalink; ?>" class="product-card__image">
            <img src="<?php echo $image_url; ?>" alt="<?php echo $title; ?>">
        </a>
        <h3 class="product-card__title"><a href="<?php echo $permalink; ?>"><?php echo $title; ?></a></h3>
        <div class="product-card__price"><?php echo $price_html; ?></div>
        <?php if ($product->is_purchasable() && $product->is_in_stock()) : ?>
            <a href="<?php echo $add_to_cart_url; ?>" class="product-card__add-to-cart">
                <?php echo $add_to_cart_text; ?>
            </a>
        <?php endif; ?>
    </div>
    <?php
    return ob_get_clean();
}

// 使用示例
$product_id = 42;
$html = get_custom_product_card_html($product_id);

注意事项 #

• 异步PHP脚本开头需要加载WordPress环境，确保能调用WooCommerce函数：

  require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
  

• 始终使用esc_html、esc_url等函数处理输出内容，避免XSS安全漏洞；
• 使用模板方法时，若主题重写了content-product.php，需确认模板逻辑符合你的需求。

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