WooCommerce实现数量变更时自动将对应商品加入购物车

实现逻辑 #

核心逻辑是给每个独立附加商品的数量操作组件绑定对应商品ID标识，监听数量变化事件（加号点击、手动输入改值），触发时仅向购物车提交当前操作对应ID的商品，不遍历其他附加商品，同时加防抖避免重复提交。

前置结构要求 #

每个附加商品的外层容器必须存储对应商品ID，方便JS精准识别操作对象，基础结构参考：

<!-- 单个附加商品容器 -->
<div class="custom-addon-item" data-addon-pid="对应商品ID">
  <p>附加商品名称</p>
  <div class="quantity">
    <button type="button" class="qty-minus">-</button>
    <input type="number" class="qty-val" value="0" min="0">
    <button type="button" class="qty-plus">+</button>
  </div>
</div>

如果使用第三方WooCommerce附加商品插件（比如官方Product Add-ons），不需要手动修改结构，直接把后续代码里的选择器替换为插件生成的附加项类名即可，这类插件默认会给每个附加项绑定商品ID属性。

前端交互代码 #

将以下代码放入子主题的自定义JS文件，或通过WooCommerce的wp_enqueue_scripts钩子挂载到商品页即可生效：

jQuery( function( $ ) {
  // 防抖控制，避免快速点击触发重复加购请求
  const addonDebounce = ( fn, delay = 300 ) => {
    let timer = null;
    return ( ...args ) => {
      clearTimeout( timer );
      timer = setTimeout( () => fn.apply( this, args ), delay );
    }
  };

  // 监听加号按钮点击
  $( document ).on( 'click', '.custom-addon-item .qty-plus', function( e ) {
    e.preventDefault();
    const $itemWrap = $( this ).closest( '.custom-addon-item' );
    const pid = $itemWrap.data( 'addon-pid' );
    const $input = $itemWrap.find( '.qty-val' );
    const currentVal = parseInt( $input.val() ) || 0;
    const newVal = currentVal + 1;
    $input.val( newVal );
    syncAddonToCart( pid, newVal, $itemWrap );
  } );

  // 监听减号按钮点击（可选，需要减数量自动同步购物车就保留）
  $( document ).on( 'click', '.custom-addon-item .qty-minus', function( e ) {
    e.preventDefault();
    const $itemWrap = $( this ).closest( '.custom-addon-item' );
    const pid = $itemWrap.data( 'addon-pid' );
    const $input = $itemWrap.find( '.qty-val' );
    const currentVal = parseInt( $input.val() ) || 0;
    const newVal = Math.max( 0, currentVal - 1 );
    $input.val( newVal );
    syncAddonToCart( pid, newVal, $itemWrap );
  } );

  // 监听手动输入数量变更
  $( document ).on( 'change', '.custom-addon-item .qty-val', addonDebounce( function() {
    const $itemWrap = $( this ).closest( '.custom-addon-item' );
    const pid = $itemWrap.data( 'addon-pid' );
    const newVal = parseInt( $( this ).val() ) || 0;
    syncAddonToCart( pid, newVal, $itemWrap );
  } ) );

  // 购物车同步逻辑
  function syncAddonToCart( pid, qty, $wrap ) {
    if ( !pid ) return;
    $wrap.addClass( 'addon-loading' );
    // 调用WooCommerce原生加购接口
    $.post( wc_add_to_cart_params.wc_ajax_url.replace( '%%endpoint%%', 'add_to_cart' ), {
      product_id: pid,
      quantity: qty
    }, function( res ) {
      if ( res.error ) {
        window.alert( res.error_message );
        return;
      }
      // 触发原生事件刷新购物车碎片，更新头部购物车计数、侧边购物车内容
      $( document.body ).trigger( 'added_to_cart', [ res.fragments, res.cart_hash ] );
    } ).always( () => {
      $wrap.removeClass( 'addon-loading' );
    } );
  }
} );

注意事项 #

• 代码中所有选择器请和你实际页面的类名保持一致，尤其是附加商品容器、数量按钮、数量输入框的类名，否则监听会失效。
• 如果需要实现数量减为0时自动从购物车移除对应附加商品，可以扩展syncAddonToCart方法，当qty=0时调用WooCommerce移除购物车项的接口即可。
• 不要通过遍历页面所有附加商品的方式提交加购，必须通过当前点击元素向上查找所属商品容器获取ID，避免出现操作A商品加购B商品的问题。

附加商品交互参考截图1
附加商品交互参考截图2

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