如何通过functions.php修改WordPress/WooCommerce站点插件添加的内联样式

你可以通过以下3种方式实现需求，所有代码均添加到当前主题（或子主题）的functions.php文件末尾即可，无需修改插件源文件，升级不会失效：

方法1：CSS样式覆盖（最简单，推荐） #

通过添加优先级更高的CSS规则直接覆盖内联样式，不会出现元素闪烁问题：

add_action('wp_head', function() {
?>
<style>
/* 强制覆盖插件生成的内联display属性 */
.payment_box.payment_method_paypal {
    display: none !important;
}
</style>
<?php
});

方法2：前端JS动态修改 #

如果CSS覆盖因为各种原因不生效，可以用JS在DOM加载完成后替换属性：

add_action('wp_footer', function() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 匹配所有目标支付容器
    const targetBoxes = document.querySelectorAll('.payment_box.payment_method_paypal');
    targetBoxes.forEach(item => {
        if(item.style.display === 'block') item.style.display = 'none';
    });
});
</script>
<?php
}, 999); // 优先级设为999确保在插件脚本之后执行

方法3：后端输出过滤（纯服务端操作，无前端依赖） #

直接在页面输出到浏览器前替换对应的HTML代码，完全不依赖前端执行：

// 开启输出缓冲
add_action('init', function() {
    ob_start();
});

// 过滤最终输出的HTML内容
add_filter('final_output', function($html) {
    $search = '<div class="payment_box payment_method_paypal" style="display:block;"';
    $replace = '<div class="payment_box payment_method_paypal" style="display:none;"';
    return str_replace($search, $replace, $html);
});

注意事项 #

• 修改functions.php前请先备份文件，避免语法错误导致网站无法访问
• 如果你的主题会定期更新，建议使用子主题的functions.php添加代码，避免更新后代码被覆盖
• 若替换不生效，可检查页面实际渲染的目标div的class是否有变动，对应调整代码中的选择器即可

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