外贸站产品页结构设计：参数表、图片、认证、FAQ 与询盘入口

引言：客户看产品页的顺序，和你写页面的顺序是反的

供应商写产品页的典型顺序是：公司简介 → 产品描述 → 参数表 → 图片 → 联系我们。但海外买家的阅读顺序恰恰相反：先看图片判断是不是他要的东西 → 看关键参数判断能不能用 → 看认证与工厂实力判断能不能信 → 看 FAQ 消除疑虑 → 最后才发询盘。把公司简介放最前面，等于在客户最想看产品的时候给他看广告。产品页改造的核心，就是把这个顺序调回来，并且在每个环节末端都放一个低门槛的转化入口。

原理分析：产品页是”疑虑消除”的流水线

B2B 采购的决策链条上有四个疑虑点，每个点对应一个模块：

WooCommerce 的产品页由 woocommerce_single_product_summary 这个 action 串联，默认优先级是：标题 5、评分 10、价格 10、简短描述 20、加入购物车 30、元信息 40、分享 50。改造产品页就是调整这些优先级，并把不需要的模块 remove_action 掉。

保姆级实操

步骤 1：重排首屏顺序。 把评分移到标题下方（B2B 站没有评分就移除），把简短描述提到价格之上——客户要先知道这是什么，再看价格。

add_action( 'init', 'mimangfei_reorder_product_summary' );
function mimangfei_reorder_product_summary() {
    // 移除 B2B 站点不需要的评分与分享
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

    // 简短描述提到价格之前，让客户先理解产品
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 8 );
}

步骤 2：做参数表。 不要用图片做参数表（无法被搜索、无法复制、移动端看不清）。用自定义字段存参数，模板里渲染成真正的 <table>。用 ACF（Advanced Custom Fields）建一个参数字段组是最省事的方式。

// 用 ACF 的 repeater 字段渲染参数表
add_action( 'woocommerce_single_product_summary', 'mimangfei_render_spec_table', 25 );
function mimangfei_render_spec_table() {
    if ( ! function_exists( 'have_rows' ) || ! have_rows( 'spec_rows' ) ) {
        return;
    }
    echo '<div class="spec-block"><h3>Specifications</h3>';
    echo '<table class="spec-table"><tbody>';
    while ( have_rows( 'spec_rows' ) ) {
        the_row();
        $label = get_sub_field( 'label' );
        $value = get_sub_field( 'value' );
        printf(
            '<tr><th scope="row">%s</th><td>%s</td></tr>',
            esc_html( $label ),
            esc_html( $value )
        );
    }
    echo '</tbody></table></div>';
}

步骤 3：图片规范。 主图白底、正方形、至少 1000px；配 3–5 张细节图与 1 张尺寸标注图；再加 1 张应用场景图。所有图片必须转 WebP 并加 loading="lazy"（首图除外，首图要 <link rel="preload">）。

// 输出带 srcset 与懒加载的图片，首图不懒加载
function mimangfei_product_image( $attachment_id, $is_first = false ) {
    return wp_get_attachment_image(
        $attachment_id,
        'woocommerce_single',
        false,
        array(
            'loading' => $is_first ? 'eager' : 'lazy',
            'class'   => 'product-photo',
        )
    );
}

步骤 4：认证模块。 用 woocommerce_product_tabs 过滤器增加一个 “Certification” 标签页，而不是全堆在正文里。

add_filter( 'woocommerce_product_tabs', 'mimangfei_add_cert_tab' );
function mimangfei_add_cert_tab( $tabs ) {
    if ( get_field( 'cert_content' ) ) {
        $tabs['certification'] = array(
            'title'    => 'Certification',
            'priority' => 15,
            'callback' => 'mimangfei_cert_tab_content',
        );
    }
    return $tabs;
}
function mimangfei_cert_tab_content() {
    echo '<div class="cert-block">' . wp_kses_post( get_field( 'cert_content' ) ) . '</div>';
}

步骤 5：FAQ 与结构化数据。 FAQ 既消除疑虑又能拿到搜索结果里的富摘要，是性价比最高的模块。用 Product 与 FAQPage 两种结构化数据标注。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "What is your minimum order quantity?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Our MOQ is 500 pieces for standard models and 2000 pieces for customized orders."
    }
  }, {
    "@type": "Question",
    "name": "How long is the delivery time?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Standard models ship within 15 days after deposit confirmation."
    }
  }]
}
</script>

步骤 6：询盘入口分层。 三个入口，门槛从低到高：侧边悬浮的 WhatsApp 按钮（最低门槛）、产品页底部的询价表单（中）、页面顶部的邮箱地址（高）。B2B 站不要用”Add to cart”，改成 “Request a Quote”。

// 把加入购物车按钮改为询价按钮（B2B 场景）
add_filter( 'woocommerce_product_single_add_to_cart_text', 'mimangfei_quote_button_text' );
function mimangfei_quote_button_text() {
    return 'Request a Quote';
}
add_filter( 'woocommerce_product_add_to_cart_url', 'mimangfei_quote_button_url' );
function mimangfei_quote_button_url( $url ) {
    return home_url( '/inquiry/?product_id=' . get_the_ID() );
}

步骤 7：加交期与起订量。 这两个是 B2B 客户最关心的信息，放在价格下方、参数表上方，用醒目的样式。

步骤 8：移动端优先验证。 超过 60% 的海外买家会用手机看第一眼，务必在真机上验证表单是否好填、图片是否清楚。

常见踩坑

1. 参数表用图片。 无法被搜索、无法翻译、移动端模糊，是外贸站最常见的错误。
2. 公司简介放最前面。 客户还没确认产品就先看广告，跳出率极高。
3. 只有一张图。 客户无法判断工艺细节，询盘质量差。
4. 案例： 某机械配件站的询盘量一直很低，改造前产品页首屏是 600 字的公司历史。把首屏换成五张实拍图 + 参数表，公司历史压缩到页面底部一小段，三个月后询盘量翻了三倍，且询盘质量明显提升（客户开始直接在邮件里指定型号）。
5. 没有 MOQ 与交期信息。 客户懒得问，直接找下一家。
6. 结构化数据与页面内容不一致。 FAQ 的 schema 写了页面上看不到的答案，会被判为作弊。
7. 询盘按钮埋得太深。 客户要滚三屏才能找到联系入口。

总结

产品页的模块顺序应该是：图 → 一句话定位 → 关键参数 → 认证 → 工厂实力 → FAQ → 询盘入口。技术上用 woocommerce_single_product_summary 调整优先级，参数用真正的 HTML 表格，FAQ 配结构化数据。判断标准：一个陌生客户能否在 30 秒内判断”这是不是我要的、能不能买”。询盘表单怎么设计见外贸询盘表单设计；信任背书内容怎么排布见外贸站信任背书布局。