概述与原理
在woocommerce中，产品属性是描述产品特征的重要组成部分。默认情况下，woocommerce可能会在产品详情页的“附加信息”选项卡中显示所有已设置的属性。然而，在某些场景下，我们可能需要在产品描述或价格附近直接显示某些关键属性，以提高用户对产品核心特征的认知。
实现这一目标的核心是利用WooCommerce的动作钩子（Action Hook）机制。通过将自定义函数挂载到特定的钩子上，我们可以在WooCommerce渲染页面时插入我们的代码，从而实现对页面内容的定制。本教程将使用woocommerce_single_product_summary钩子，它允许我们在产品标题、价格、简短描述等核心信息下方插入自定义内容。
实现步骤与代码示例
以下是实现此功能的PHP代码：
add_action( 'woocommerce_single_product_summary', 'display_specific_product_attributes', 45 );
/**
* 在WooCommerce单品页显示指定的商品属性
*/
function display_specific_product_attributes() {
global $product; // 获取当前产品对象
// 定义需要显示的属性列表。
// 请将 'pa_size' 和 'pa_color' 替换为您的实际属性的slug。
// 属性slug通常以 'pa_' 开头，例如：'pa_material', 'pa_brand'。
$taxonomies_to_display = array( 'pa_size', 'pa_color' );
// 遍历指定的属性列表
foreach ( $taxonomies_to_display as $taxonomy_slug ) {
// 获取当前产品的该属性值
$attribute_value = $product->get_attribute( $taxonomy_slug );
// 如果属性有值，则显示它
if ( ! empty( $attribute_value ) ) {
// 获取属性的显示名称（标签）
$attribute_label = get_taxonomy( $taxonomy_slug )->labels->singular_name;
// 输出属性的标签和值
echo '' . esc_html( $attribute_label ) . ': ' . esc_html( $attribute_value ) . '
';
}
}
}代码解释：
-
add_action( 'woocommerce_single_product_summary', 'display_specific_product_attributes', 45 );
- add_action：WooCommerce（WordPress）用于将函数挂载到特定事件（钩子）上的函数。
- 'woocommerce_single_product_summary'：这是一个WooCommerce的动作钩子，表示我们的函数将在产品单页的核心摘要区域执行。
- 'display_specific_product_attributes'：这是我们将要执行的自定义函数的名称。
- 45：这是函数的执行优先级。数字越小，函数执行得越早。默认优先级是10。通过设置为45，我们可以确保它在WooCommerce的默认内容（如价格、简短描述）之后显示。
-
function display_specific_product_attributes() { ... }
- 这是包含我们逻辑的自定义函数。
-
global $product;
- 在WooCommerce模板文件中，$product是一个全局变量，它代表当前正在查看的产品对象。通过global关键字，我们可以在函数内部访问它。
-
$taxonomies_to_display = array( 'pa_size', 'pa_color' );
- 这是最关键的部分。您需要将数组中的字符串替换为您希望显示的产品属性的slug。
- 如何找到属性的slug？ 在WordPress后台，进入“产品” -> “属性”，编辑您的属性，其“别名”（slug）通常就是您需要的值，并且WooCommerce产品属性的slug总是以pa_开头（例如：pa_material, pa_color, pa_weight）。
-
foreach ( $taxonomies_to_display as $taxonomy_slug ) { ... }
- 这段代码会遍历您在$taxonomies_to_display数组中定义的每一个属性slug。
-
$attribute_value = $product->get_attribute( $taxonomy_slug );
- $product->get_attribute()是WooCommerce产品对象的一个方法，用于根据属性的slug获取该产品对应的属性值。
-
if ( ! empty( $attribute_value ) ) { ... }
- 这是一个条件判断，确保只有当产品确实设置了该属性值时，我们才尝试显示它，避免输出空内容。
-
$attribute_label = get_taxonomy( $taxonomy_slug )->labels->singular_name;
- get_taxonomy()是一个WordPress函数，用于获取指定分类法（在WooCommerce中，属性被视为分类法）的详细信息。
- .labels->singular_name则用于获取该分类法（属性）的单数形式的显示名称，例如“尺寸”而不是“pa_size”。
-
echo '
' . esc_html( $attribute_label ) . ': ' . esc_html( $attribute_value ) . '
';- 这行代码负责将属性的标签和值输出到HTML中。我们使用了esc_html()函数来对输出内容进行HTML转义，这是防止XSS攻击的安全最佳实践。
如何使用这段代码
- 使用子主题： 强烈建议您在WordPress网站上使用子主题（Child Theme）。直接修改父主题的文件会在主题更新时丢失您的更改。
-
编辑 functions.php 文件：
- 通过FTP客户端或您的主机控制面板的文件管理器，导航到您的子主题目录（通常在 wp-content/themes/your-child-theme-name/）。
- 找到 functions.php 文件并编辑它。
- 将上述代码复制并粘贴到 functions.php 文件的末尾，在 ?> 标签（如果存在）之前。
- 保存并测试： 保存文件后，访问您的WooCommerce产品单页，您应该能在产品摘要区域看到您指定的属性及其值。
注意事项与进阶
- 属性Slug的准确性： 确保您在$taxonomies_to_display数组中使用的属性slug是完全正确的，包括pa_前缀。一个错误的slug将导致该属性无法显示。
- 代码位置： 虽然functions.php是放置此类代码的常见位置，但对于更复杂的定制或为了更好的组织性，您也可以考虑创建一个自定义插件来存放这些代码。
-
显示位置调整： 如果您希望属性显示在产品页的不同位置，可以尝试使用其他WooCommerce钩子：
- woocommerce_before_single_product_summary：在产品摘要区域之前。
- woocommerce_after_single_product_summary：在产品摘要区域之后。
- woocommerce_product_meta_start / woocommerce_product_meta_end：在产品元信息（SKU、分类、标签）的开始或结束位置。
- 通过调整add_action中的优先级数字，您也可以微调其在特定钩子内部的显示顺序。
-
样式定制： 输出的属性目前仅包裹在
标签中。您可以通过为这些
标签添加CSS类或直接在您的主题CSS文件中添加样式规则来美化它们的显示。例如，可以修改echo语句为：
echo '
' . esc_html( $attribute_label ) . ': ' . esc_html( $attribute_value ) . '
';然后在您的CSS文件中添加：
.product-custom-attribute { font-size: 1.1em; color: #333; margin-bottom: 5px; }
总结
通过上述方法，您可以灵活地控制WooCommerce产品单页上特定属性的显示，从而为您的客户提供更清晰、更直观的产品信息。这种定制化不仅提升了用户体验，也使得您的产品页面更加专业和有条理。记住，在进行任何代码修改时，始终先备份您的网站，并优先在开发环境中进行测试。
