如何禁止用户取消选择WooCommerce变体色板？

核心思路 #

拦截已选中色板的点击事件，阻止其触发取消选择逻辑，确保用户始终无法取消当前已选中的变体选项。

具体实现方案 #

方案1：添加自定义JS代码阻止点击

利用jQuery监听已激活色板的点击动作，直接阻止默认行为：

jQuery(document).ready(function($) {
    // 监听已选中色板的点击事件
    $(document).on('click', '.variations_form .swatch-active', function(e) {
        // 阻止默认取消行为
        e.preventDefault();
        e.stopPropagation();
    });
});

方案2：通过PHP将代码注入产品页面

如果不想直接修改JS文件，可通过主题functions.php注入代码，避免主题更新丢失：

function keylight_disable_swatch_deselect() {
    // 仅在产品页面加载代码
    if ( is_product() ) {
        wp_add_inline_script( 'jquery', '
            jQuery(document).ready(function($) {
                $(document).on("click", ".variations_form .swatch-active", function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                });
            });
        ' );
    }
}
add_action( 'wp_enqueue_scripts', 'keylight_disable_swatch_deselect' );

注意事项 #

• 若插件给已选中色板添加的类不是.swatch-active，请用浏览器开发者工具（F12）查看元素实际类名，替换代码中的对应选择器（比如部分插件会用selected或active-swatch）。
• 测试时刷新产品页面，点击已选中的色板，确认不会取消选择状态，同时未选中的色板仍可正常切换。

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