如何在WooCommerce属性的上方或下方添加自定义文本？

嘿，我明白你之前是用woocommerce_attribute_label过滤器在属性标签旁边加文本，但现在想把提示放在属性的上方或下方——这个需求其实换个钩子就能轻松实现，不用再折腾标签本身啦！

方法一：针对单个属性精准添加（推荐） #

WooCommerce内置了专门针对属性前后位置的钩子，你可以直接定位到pa_colour这类特定属性，在它的上方或下方插入自定义文本：

// 在pa_colour属性上方添加提示文本
add_action( 'woocommerce_before_attribute_pa_colour', 'add_custom_text_above_colour_attribute', 10 );
function add_custom_text_above_colour_attribute() {
    echo '<div class="attribute-custom-text">' . __( '请选择所需颜色', 'woocommerce' ) . '</div>';
}

// （可选）在pa_colour属性下方添加提示文本
add_action( 'woocommerce_after_attribute_pa_colour', 'add_custom_text_below_colour_attribute', 10 );
function add_custom_text_below_colour_attribute() {
    echo '<div class="attribute-custom-text">' . __( '颜色选定后将无法修改', 'woocommerce' ) . '</div>';
}

只需要把pa_colour替换成你需要的属性slug（比如pa_size），就能给对应的属性添加提示。

方法二：批量给多个属性添加提示 #

如果你需要给多个属性添加不同的提示，可以用通用钩子结合判断逻辑：

// 给指定属性添加上方提示
add_action( 'woocommerce_before_attribute', 'add_custom_text_above_target_attributes', 10, 3 );
function add_custom_text_above_target_attributes( $attribute, $product, $variation ) {
    // 定义需要添加提示的属性slug和对应文本
    $attribute_texts = array(
        'pa_colour' => __( '请选择所需颜色', 'woocommerce' ),
        'pa_size'   => __( '请选择合适的尺寸', 'woocommerce' ),
        'pa_material' => __( '材质影响产品耐用性', 'woocommerce' )
    );

    // 如果当前属性在列表中，输出对应提示
    if ( isset( $attribute_texts[ $attribute->get_name() ] ) ) {
        echo '<div class="attribute-custom-text">' . $attribute_texts[ $attribute->get_name() ] . '</div>';
    }
}

美化提示文本（可选） #

可以添加一些CSS样式让提示更美观，把这段代码加到主题的自定义CSS区域或者style.css文件里：

.attribute-custom-text {
    margin: 12px 0;
    color: #555;
    font-size: 14px;
    font-style: italic;
    padding-left: 2px;
}

注意事项 #

• 代码可以添加到当前主题的functions.php文件，或者使用自定义功能插件（推荐后者，避免主题更新丢失代码）
• 不要直接修改WooCommerce核心文件，否则更新后会丢失修改

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