提问人：Keylight Tim 提问时间：10/25/2023 最后编辑：LoicTheAztecKeylight Tim 更新时间：10/26/2023 访问量：75
不允许用户在 WooCommerce 中取消选择变体样本
Don't allow users to deselect variation swatch in WooCommerce
问：
在我们的品牌 Keylight 的网站上，我们使用插件 Variation Swatches and Photos，让客户通过颜色和图像样本选择不同的变体选项。每个产品都有一个默认选择设置，其中为变体选择禁用了“选择选项”选项。不幸的是，客户仍然能够通过再次按下所选样本来“取消选择”它，这会导致混淆，因为这会导致无效的变化。客户应始终为每个属性选择一个选项。
我们在 Google 上搜索了解决方案，但我们得到的最接近的是这篇文章 不允许用户取消选择 WooCommerce 中的变体。我们应用了这段代码，它确实删除了下拉选项选择中的选择，但这不适用于色板，因为您仍然可以取消选择色板。
我们想要的是，当客户第二次按下色板时，它不会取消选择色板，以便始终选择变体。有谁知道我们如何实现这一目标？
答：
2赞
Snuffy
10/25/2023
#1
使用以下jquery，您可以检测用户是否单击了已选择的选项，这将使其处于未选中状态并阻止取消选择。 为此，请将以下内容放在产品上加载的 js 文件中，或创建文件并将其加载到您的主题中，或使用“简单自定义 CSS 和 JS”等插件或任何其他插件。
jQuery(function($) {
$('.select-option.swatch-wrapper').on('click', function(e) {
if ($(this).hasClass('selected')) {
e.stopPropagation();
}
});
});
更新了代码。检查有点矫枉过正，但让我知道这是否有效。
jQuery(function($) {
$(document).ready(function(){
if($('.select-option.swatch-wrapper').length > 0 ) {
$('.select-option.swatch-wrapper').on('click', function(e) {
if ($(this).hasClass('selected')) {
e.stopPropagation();
}
});
}
});
});
评论
0赞
LoicTheAztec
10/25/2023
不错的创意答案。例如，您应该将此代码添加到挂钩的函数中。woocommerce_after_variations_form
0赞
Keylight Tim
10/26/2023
我们尝试了页脚中的 j 查询代码，它确实可以正常工作，但这会在产品页面之外产生错误。然后我们尝试将其添加到woocommerce_after_variations_form中，但这还不起作用。您能进一步详细说明如何正确添加它吗？这是我们使用的代码： <code> function woocommerce_after_variations_form（）{ ？> <script>jQuery（function（$） { $（'.select-option.swatch-wrapper'）.on（'click'， function（e） { if （$（this）.hasClass（'selected'）） { e.stopPropagation（）; }）; }）; </script> <？php } </code>
0赞
Snuffy
10/26/2023
我无法说出这个色板插件是如何工作的，但可以尝试使用不同的钩子，例如woocommerce_after_add_to_cart_form
0赞
Keylight Tim
10/26/2023
我们发现了我们的错误，现在它可以正常工作。谢谢两位的支持！
0赞
Snuffy
10/26/2023
如果您想尝试，我已经添加了代码更新。但是，如果它的工作，原来的也很好。很高兴你发现了问题所在。
评论