在WooCommerce单品页自定义显示特定商品属性

引言：为何需要自定义属性显示？

在woocommerce中，产品通常会包含多种属性，如尺寸、颜色、材质等。默认情况下，woocommerce会在单品页的“附加信息”选项卡中显示所有已设置的属性。然而，在某些场景下，我们可能希望在产品描述或价格附近等更显眼的位置，直接展示某些特定的、关键的属性，而不是所有属性。这不仅能提升用户体验，帮助顾客快速获取核心信息，还能使页面布局更简洁、专业。

本教程将指导您如何通过自定义代码，精确控制哪些属性以及在何处显示在WooCommerce的单品页面上。

核心方法：使用woocommerce_single_product_summary钩子

WooCommerce提供了丰富的动作钩子（Action Hooks），允许开发者在不修改核心文件的情况下，向特定位置注入自定义内容。woocommerce_single_product_summary是其中一个非常实用的钩子，它位于单品页的产品标题、价格、简短描述等核心信息区域之后，非常适合用来展示自定义属性。

我们的核心思路是：

1. 利用add_action函数将自定义函数挂载到woocommerce_single_product_summary钩子上。
2. 在自定义函数中，获取当前产品对象。
3. 定义一个数组，其中包含您希望显示的特定属性的“slug”（标识符）。
4. 遍历这个数组，对每个属性：
   • 通过产品对象获取该属性的值。
   • 获取该属性的显示名称（标签）。
   • 将属性的标签和值格式化后输出到页面上。

代码实现

将以下PHP代码添加到您的WordPress主题的functions.php文件（强烈建议使用子主题的functions.php），或者通过自定义插件来实现。

<?php
/**
 * 在WooCommerce单品页显示指定商品属性
 *
 * 此函数通过 woocommerce_single_product_summary 钩子，
 * 在商品摘要区域选择性地展示预定义的商品属性。
 */
add_action( 'woocommerce_single_product_summary', 'display_specific_product_attributes', 45 );

function display_specific_product_attributes() {
    global $product; // 获取当前产品对象

    // 检查当前页面是否为WooCommerce产品页，并且 $product 对象有效
    if ( ! is_product() || ! is_a( $product, 'WC_Product' ) ) {
        return;
    }

    // 定义您希望显示的属性的“slug”数组。
    // WooCommerce产品属性的slug通常以 'pa_' 开头。
    // 例如：'pa_size' 代表“尺寸”属性，'pa_color' 代表“颜色”属性。
    $taxonomies_to_display = array(
        'pa_size',    // 示例：尺寸属性
        'pa_color',   // 示例：颜色属性
        // 'pa_material', // 如果您有更多属性，可以在这里添加
        // 'pa_weight',   // 确保这些属性存在于您的产品中
    );

    // 遍历定义的属性数组
    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;

            // 输出属性的标签和值，并添加CSS类以便样式控制
            echo '<p class="product-attribute product-attribute-' . esc_attr( $taxonomy_slug ) . '">';
            echo '<strong>' . esc_html( $attribute_label ) . ':</strong> ';
            echo esc_html( $attribute_value );
            echo '</p>';
        }
    }
}
?>

如何识别属性Slug

在WooCommerce中，您创建的自定义产品属性（全局属性）会被系统自动转换为分类法（taxonomy），其slug通常以pa_作为前缀。要找到您想显示的属性的准确slug，可以按照以下步骤操作：

1. 登录WordPress后台。
2. 导航到 产品 > 属性。
3. 点击您想要显示的属性名称，进入编辑页面。
4. 查看浏览器地址栏中的URL，您会看到类似 .../wp-admin/edit-taxonomy.php?taxonomy=pa_your-attribute-name&post_type=product 的结构。其中 pa_your-attribute-name 就是该属性的slug。例如，如果属性名为“尺寸”，其slug很可能是pa_size。
5. 将这些slug添加到代码中的 $taxonomies_to_display 数组中。

实施步骤与注意事项

1. 代码放置位置：

   

   稿定在线PS

   PS软件网页版

   99

   查看详情
   • 推荐： 使用您当前主题的子主题（Child Theme）的 functions.php 文件。这样，当父主题更新时，您的自定义代码不会丢失。
   • 替代： 创建一个自定义插件。这对于更复杂的定制或需要在多个网站上复用的功能来说是更好的选择。
   • 不推荐： 直接修改父主题的 functions.php 文件，因为主题更新会覆盖您的修改。

2. 钩子优先级（45）：

   • add_action 函数中的第三个参数 45 是优先级。数字越小，函数执行得越早。默认优先级是 10。
   • 将优先级设置为 45 意味着您的属性将在产品标题、价格、简短描述（默认优先级通常较低，如10、20、30）之后显示，但在“添加到购物车”按钮（通常优先级在30或40）之后，以及产品元数据（如SKU、分类、标签，通常优先级在50及以上）之前显示。您可以根据需要调整此数字来改变属性的显示顺序。

3. 样式美化：

   • 代码中为每个属性输出的 <p> 标签添加了 product-attribute 和 product-attribute-pa_slug 类。您可以使用这些类在您的主题CSS文件中添加自定义样式，例如：

     /* styles.css 或自定义CSS文件 */
     .product-attribute {
         font-size: 16px;
         margin-bottom: 5px;
     }
     .product-attribute strong {
         color: #333;
     }
     .product-attribute-pa_color {
         /* 针对特定颜色属性的样式 */
         color: blue;
     }

     登录后复制

4. 属性存在性检查：

   • 代码中包含了 if ( ! empty( $attribute_value ) ) 检查，确保只有当产品确实设置了该属性的值时才显示。这可以避免显示空的属性标签。

5. 安全性：

   • 代码中使用了 esc_attr() 和 esc_html() 函数来转义输出的内容，这有助于防止XSS（跨站脚本）攻击，提高代码的安全性。

总结

通过上述方法，您可以灵活地控制WooCommerce单品页上特定产品属性的显示。这种编程方式不仅提供了高度的定制性，使您能够根据业务需求和设计偏好来优化产品页面布局，还能提升网站的专业性和用户体验。记住始终在子主题或自定义插件中进行此类修改，以确保网站的稳定性和可维护性。

以上就是在WooCommerce单品页自定义显示特定商品属性的详细内容，更多请关注php中文网其它相关文章！