WooCommerce对未登录用户隐藏vc_button类按钮无效的解决方法

• CSS方案失效：WordPress核心仅会给已登录用户的<body>标签挂载logged-in类，不存在默认的logged-out类，你写的.logged-out .vc_button选择器完全无法匹配到页面元素，自然不会生效。
• PHP方案失效：你写的逻辑只是额外输出了一个空的、隐藏的.vc_button元素，没有对页面本身已经渲染的目标按钮做任何显示控制，原有按钮还是会正常展示给未登录用户，属于无效代码。

优先推荐PHP方案，CSS方案仅做视觉隐藏，访客可以通过浏览器开发者工具修改元素属性绕过，PHP方案是直接不向未登录用户输出对应内容，逻辑更严谨。

方案1：快速CSS修复 #

直接利用系统自带的logged-in类写反向选择器，代码粘贴到「外观-自定义-额外CSS」中即可：

body:not(.logged-in) .vc_button {
    display: none !important;
}

加!important是为了覆盖WPBakery编辑器（vc_前缀是该插件的标识）给按钮生成的内联样式，避免选择器优先级不够导致规则失效。

方案2：PHP逻辑控制（推荐） #

根据按钮的添加场景选对应写法：

• 如果按钮是你手动通过编辑器/页面模板添加的，直接在按钮输出位置套登录判断，仅对登录用户渲染按钮：

<?php
if ( is_user_logged_in() ) {
    // 替换成你自己的vc_button实际渲染代码，比如短代码、原生HTML
    echo do_shortcode('[vc_button title="登录可见按钮" link="url:xxx||"]');
}
?>

• 如果按钮是主题/第三方插件自动输出、无法直接修改源码的，把下面代码粘贴到子主题的functions.php文件中，会在页面输出前自动过滤掉未登录用户看到的vc_button元素：

add_filter('the_content', 'hide_vc_button_for_guest', 99);
function hide_vc_button_for_guest($content) {
    if (!is_user_logged_in()) {
        $content = preg_replace('/<[^>]*class="[^"]*vc_button[^"]*"[^>]*>.*?<\/[^>]*>/is', '', $content);
    }
    return $content;
}

注意：如果站点开了页面缓存，必须在缓存设置中开启「按用户登录状态分离缓存」选项，否则缓存会混淆登录/未登录用户的页面内容，导致显示规则失效。

内容的提问来源于stack exchange，提问作者gulf optics web master