如何通过PHP钩子为WooCommerce变体fieldset添加legend标签

完全可以通过WooCommerce自带的PHP钩子实现这个需求，无需修改核心模板文件。以下是具体实现步骤：

1. 添加PHP钩子代码 #

将以下代码添加到你的WordPress主题（或子主题）的functions.php文件中：

add_filter( 'woocommerce_variation_attribute_html', 'add_legend_to_variation_fieldset', 10, 4 );
function add_legend_to_variation_fieldset( $html, $attribute, $options, $selected ) {
    // 检测当前属性输出是否包含fieldset标签（适配radio类型的变体属性）
    if ( strpos( $html, '<fieldset' ) !== false ) {
        // 自定义legend文本，可替换为属性名称或任意内容
        // 若要使用属性原名，可替换为：$legend_text = wc_attribute_label( $attribute['name'] );
        $legend_text = __('订阅信息', 'woocommerce');
        // 在fieldset内部开头插入legend标签
        $html = str_replace( '<fieldset', '<fieldset><legend>' . $legend_text . '</legend>', $html );
    }
    return $html;
}

这段代码会拦截变体属性的HTML输出，当检测到fieldset标签时，自动在其内部顶部插入指定的legend标签。你可以根据需求修改$legend_text的内容，比如直接使用变体属性的原生名称。

2. 修改后的HTML结构 #

执行上述代码后，变体属性的HTML结构会更新为如下形式：

<fieldset id="edition" class="kad_radio_variations" name="attribute_edition" data-attribute_name="attribute_edition">
<legend>订阅信息</legend>
<input type="radio" value="Test-1" id="attribute_editionTest-1" name="attribute_edition">
<label for="attribute_editionTest-1">Test-1</label>
<input type="radio" value="Test-2" id="attribute_editionTest-2" name="attribute_edition">
<label for="attribute_editionTest-2">Test-2</label>
</fieldset>

3. 对应的CSS样式 #

为了让legend标签呈现预期样式，可添加以下CSS代码到主题的自定义CSS区域或样式文件中：

/* 为fieldset添加边框 */
fieldset {
  border:1px solid gray;
}
/* 自定义legend外观 */
legend {
  padding: 0.2em 0.5em;
  color: gray;
  font-size: 90%;
  position: relative;
}
/* 在legend左右添加短竖线装饰 */
legend:before {
  position: absolute;
  height: 8px;
  border-left: 1px solid gray;
  left: 0px;
  top: 7px;
}
legend:after {
  position: absolute;
  height: 8px;
  border-right: 1px solid gray;
  right: 0px;
  top: 7px;
}

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