如何使用自定义CSS修改WooCommerce商品下拉<option>选项的显示文本

实现文本替换的自定义CSS代码 #

直接复制以下代码到WooCommerce后台「外观」→「自定义」→「额外CSS」的输入框，保存后即可生效：

/* 隐藏option原有文本 */
.wcsatt-options-product-dropdown option {
    font-size: 0;
}
/* 替换每月选项的文本 */
.wcsatt-options-product-dropdown option[value="1_month"]::before {
    content: "example text 1";
    font-size: 14px;
}
/* 替换每两月选项的文本 */
.wcsatt-options-product-dropdown option[value="2_month"]::before {
    content: "example text 2";
    font-size: 14px;
}

可选优化（适配选中状态显示） #

如果发现下拉框选中后，输入框内显示的还是原有德语文本，可以额外添加以下代码：

/* 隐藏下拉框默认选中显示的文本 */
.wcsatt-options-product-dropdown {
    color: transparent;
}
/* 适配选中状态的文本显示 */
.wcsatt-options-product-dropdown option:checked::before {
    color: #333;
    font-size: 14px;
}

调整说明 #

• 代码中的font-size可以根据你站点的默认字体大小自行调整
• 需要修改替换的文本时，直接修改对应content属性双引号内的内容即可

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