WooCommerce Product Bundles基于Ajax无刷新加购实现加购操作按钮展示

核心实现逻辑 #

完全复用WooCommerce原生前端事件流完成全流程交互，无需自定义后端接口、无页面刷新，和Product Bundles插件的原生加购逻辑100%兼容，不需要额外校验购物车状态。 #

步骤1：预置前端操作按钮容器 #

在单产品页加购按钮所在的form.cart节点后方，添加默认隐藏的提示容器，直接嵌入主题对应模板即可：

<!-- 捆绑产品加购成功提示容器，默认隐藏 -->
<div class="bundle-add-notice" style="display:none; margin: 15px 0; padding: 12px; border: 1px solid #e5e5e5; border-radius: 4px;">
  <p style="margin: 0 0 10px 0;">捆绑产品已成功加入购物车</p>
  <div style="display: flex; gap: 10px; flex-wrap: wrap;">
    <a href="/cart/" class="button wc-forward">查看购物车</a>
    <button type="button" class="button revert-cart-btn">继续购物</button>
  </div>
</div>

说明：容器直接放在加购表单后方，后续通过DOM选择器定位时不会出现匹配错误，同时不会影响页面其他产品的加购交互。 #

步骤2：核心JavaScript交互实现 #

代码完全基于WooCommerce内置的全局自定义事件触发逻辑编写，无额外请求，无刷新流程：

jQuery(function($){
  // 监听WooCommerce原生Ajax加购成功的全局事件
  $(document).on('added_to_cart', function(e, fragments, cart_hash, $clickedBtn){
    // 定位当前点击的加购按钮所属的表单容器
    const $targetCartForm = $clickedBtn.closest('form.cart');
    // 仅对Product Bundles类型的产品生效，不影响普通产品的加购逻辑
    if (!$targetCartForm.hasClass('product-type-bundle')) return;
    // 定位当前表单对应的提示容器
    const $noticeBox = $targetCartForm.next('.bundle-add-notice');
    // 临时禁用加购按钮，避免重复提交
    $targetCartForm.find('.single_add_to_cart_button').prop('disabled', true).text('已加入购物车');
    // 滑动展示成功提示和操作按钮
    $noticeBox.slideDown(200);
  });

  // 绑定「继续购物」按钮的交互逻辑
  $(document).on('click', '.bundle-add-notice .revert-cart-btn', function(){
    const $noticeBox = $(this).closest('.bundle-add-notice');
    // 隐藏提示框
    $noticeBox.slideUp(200);
    // 恢复加购按钮的可点击状态
    $noticeBox.prev('form.cart').find('.single_add_to_cart_button').prop('disabled', false).text('加入购物车');
  });
});

关键注意事项 #

• 不要通过绑定加购按钮的click事件触发提示展示，必须等added_to_cart事件触发后再执行逻辑，避免遇到加购失败（库存不足、参数校验不通过）时，错误弹出成功提示。
• 整个流程不需要额外发请求校验购物车商品数量，added_to_cart事件本身就是后端处理加购成功、返回正确响应后由WooCommerce自动触发的，状态100%可靠。
• Product Bundles插件的加购逻辑完全复用WooCommerce核心的Ajax加购端点，请求成功后会正常触发上述全局事件，不存在兼容问题。
• 「继续购物」按钮不做任何页面跳转，仅在当前页面隐藏提示框、恢复加购按钮状态，完全适配全站无刷新的交互逻辑。
• 如果站点启用了页面缓存，建议将这段JS内联到单产品页模板中，不要放到外部缓存的静态JS文件中，避免版本更新后事件监听不到。

内容的提问来源于stack exchange，提问作者Web-Dev