如何自定义WooCommerce商品变体选择提示框为Bootstrap模态框？

我明白你想把默认的变体选择提示换成Bootstrap模态框的需求，之前的代码无效是因为WooCommerce本身有一套变体验证的逻辑，直接监听按钮点击会被它的默认事件干扰。咱们可以通过以下步骤实现：

第一步：禁用默认的错误提示 #

首先要让WooCommerce不弹出自带的提示框，我们可以用钩子移除它的默认验证脚本行为：

add_action( 'wp_enqueue_scripts', 'remove_woocommerce_variation_script', 100 );
function remove_woocommerce_variation_script() {
    wp_dequeue_script( 'wc-add-to-cart-variation' );
}

把这段代码加到你的主题functions.php里，或者用自定义代码插件添加即可。

第二步：添加自定义验证逻辑和模态框 #

接下来需要自己写JS检查变体是否选择完整，同时准备Bootstrap模态框的HTML结构：

1. 先在商品页面添加模态框HTML #

可以把这段代码加到主题的single-product.php或者自定义模板里，比如放在加入购物车按钮附近：

<!-- Bootstrap模态框 -->
<div class="modal fade" id="variantSelectionModal" tabindex="-1" aria-labelledby="variantModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="variantModalLabel">请选择商品规格</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        您需要先选择完整的商品变体规格，才能加入购物车哦！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

2. 编写自定义JS验证逻辑 #

把这段JS代码加到主题的自定义JS文件里，或者用wp_add_inline_script添加：

jQuery(document).ready(function($) {
    // 监听加入购物车按钮点击
    $('.single-product .single_add_to_cart_button').on('click', function(e) {
        var $form = $(this).closest('form.variations_form');
        // 检查是否有未选择的变体下拉框
        var hasEmptyVariation = $form.find('.variations select').filter(function() {
            return $(this).val() === '';
        }).length > 0;

        // 如果存在未选择的变体
        if (hasEmptyVariation) {
            e.preventDefault(); // 阻止默认提交行为
            $('#variantSelectionModal').modal('show'); // 弹出Bootstrap模态框
            return false;
        }
        // 如果变体都已选择，正常提交表单
    });
});

注意事项 #

• 确保你的网站已经正确引入了Bootstrap的CSS和JS文件（包括模态框所需的Popper.js依赖，Bootstrap 5已内置但Bootstrap 4需要单独引入）
• 如果你的主题或插件已经修改过变体选择逻辑，可能需要调整代码中的选择器匹配规则

这样就能完美替换默认的提示框啦！

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