如何将WooCommerce变体选择框文本设置为首字母大写

现有实现背景 #

我已通过CSS隐藏了WooCommerce变体选项的标签，并使用PHP代码为选择框添加了包含属性名称的自定义占位文本，现有代码如下：

PHP自定义占位文本代码

function filter_woocommerce_dropdown_variation_attribute_options_args( $array ) { 

    $attribute_name = wc_attribute_label($array['attribute']);
    $select_text = 'Choose an ' . $attribute_name;

    $array['show_option_none'] = __( $select_text, 'woocommerce' );
    return $array; 
}; 

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'filter_woocommerce_dropdown_variation_attribute_options_args', 10, 1 ); 

隐藏标签的CSS代码

.variations th.label {
  display: none;
}

现在需要将选择框中的文本设置为首字母大写，已知需使用text-transform: capitalize，但不确定正确的CSS选择器，也想了解是否可直接在PHP代码中实现。

解决方案 #

方案一：PHP代码层面直接修改（推荐）

从源头修改文本内容，避免前端样式失效问题，直接对生成的文本进行首字母大写处理：

function filter_woocommerce_dropdown_variation_attribute_options_args( $array ) { 
    $attribute_name = wc_attribute_label($array['attribute']);
    // 使用ucwords()将每个单词首字母大写
    $select_text = ucwords('Choose an ' . $attribute_name);

    $array['show_option_none'] = __( $select_text, 'woocommerce' );
    return $array; 
}; 

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'filter_woocommerce_dropdown_variation_attribute_options_args', 10, 1 ); 

如果需要仅让属性名称首字母大写，可单独处理属性字段：

$attribute_name = ucfirst(wc_attribute_label($array['attribute']));
$select_text = 'Choose an ' . $attribute_name;

方案二：CSS样式层面实现

若仅需修改前端显示效果，需使用精准选择器命中WooCommerce变体选择框，避免样式被覆盖：

/* 基础选择器，命中所有变体选择框 */
.variations select {
  text-transform: capitalize;
}

/* 高优先级选择器，解决样式覆盖问题 */
.woocommerce div.product form.cart .variations select {
  text-transform: capitalize !important;
}

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