本文介绍如何在 WooCommerce 商品页中，通过自定义短代码灵活组合两个不同商品属性：一个作为超链接的 href 地址，另一个作为可点击的锚文本，实现如 externalwebsite.com 的动态输出。
本文介绍如何在 woocommerce 商品页中，通过自定义短代码灵活组合两个不同商品属性：一个作为超链接的 `href` 地址，另一个作为可点击的锚文本，实现如 `externalwebsite.com` 的动态输出。
在 WooCommerce 开发中，常需将商品自定义属性（如品牌官网、外部产品页 URL）以结构化方式展示。例如，希望显示「View on [Brand Name]」，其中文字“[Brand Name]”是可点击链接，而实际跳转地址却是另一个属性值（如具体产品路径）。原生 WooCommerce 并不支持跨属性组合渲染，但借助短代码机制与 HTML 块的协同，可优雅实现该需求。
✅ 推荐方案：HTML 块 + 属性短代码嵌套
WooCommerce 默认不提供 href 与 text 分离的链接短代码，但可通过社区广泛采用的 [display_attributes] 短代码（由 Helga The Viking 提出并持续维护）扩展实现。该短代码支持按属性名精准提取单个值，且兼容多值属性（自动取首个）。
关键要点：
- 短代码必须使用单引号包裹属性名，避免与 HTML 双引号冲突；
- href 和锚文本需分别调用两次短代码，不可合并为一个短代码；
- 建议在 WordPress 编辑器中使用「自定义 HTML」区块（而非「段落」或「短代码」区块），确保 HTML 结构完整解析。
示例代码如下（可直接粘贴至商品编辑页的「自定义 HTML」区块中）：
<p>View on <a href="[display_attributes attributes='product-url']">[display_attributes attributes='brand-website']</a></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/731" title="v0.dev"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d7bb07edf422.png" alt="v0.dev" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/731" title="v0.dev">v0.dev</a>
<p>Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码</p>
</div>
<a href="/ai/731" title="v0.dev" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>⚠️ 注意事项：
- 属性 slug（如 product-url、brand-website）需与后台「产品 → 属性」中注册的 Attribute Name（URL Slug） 完全一致（区分大小写与连字符）；
- 若属性未填写，短代码将输出空字符串，导致 无效链接——建议搭配条件判断短代码（如 [display_attributes_if_has_value]）增强健壮性；
- 该方案依赖第三方短代码功能，需确保已启用对应插件（如 WooCommerce Product Attributes Shortcode）或已在主题 functions.php 中注册了 display_attributes 短代码逻辑。
? 补充：简易短代码注册（供参考）
若尚未启用 display_attributes 短代码，可在子主题 functions.php 中添加以下基础实现：
function wc_display_attributes_shortcode( $atts ) {
$atts = shortcode_atts( array(
'attributes' => '',
'separator' => ', ',
), $atts );
if ( ! is_singular( 'product' ) || ! $atts['attributes'] ) return '';
$product = wc_get_product( get_the_ID() );
if ( ! $product ) return '';
$slugs = array_map( 'trim', explode( ',', $atts['attributes'] ) );
$values = array();
foreach ( $slugs as $slug ) {
$term = $product->get_attribute( $slug );
if ( $term && ! is_wp_error( $term ) ) {
$values[] = esc_url( $term );
}
}
return ! empty( $values ) ? $values[0] : '';
}
add_shortcode( 'display_attributes', 'wc_display_attributes_shortcode' );此函数仅返回首个匹配属性值（符合本场景需求），并自动进行 esc_url() 安全转义，防止 XSS 风险。
✅ 总结
无需编写复杂 PHP 模板或钩子，利用 HTML 区块 + 经过验证的属性短代码即可快速、安全、可维护地实现双属性动态链接。该方法轻量、兼容性强，适用于 Gutenberg 编辑器及大多数 WooCommerce 主题，是面向非开发者友好且生产环境可用的标准实践。
