WooCommerce自定义JS事件在All Products Gutenberg区块中无法检测

你的代码之所以失效，核心原因是WooCommerce Blocks（包括All Products区块）采用了独立的React/JS架构，和传统WooCommerce短代码的jQuery/ajax事件体系不兼容。传统的added_to_cart、wc_fragments_loaded事件以及ajaxSuccess监听，无法捕获区块组件的添加购物车动作。

下面是两种可行的实现方案：

方案一：监听WooCommerce Blocks专属事件 #

WooCommerce Blocks会在商品成功加入购物车时，在document上触发wc-blocks_added_to_cart自定义事件，直接监听该事件即可：

document.addEventListener('wc-blocks_added_to_cart', function(event) {
  // 定位到触发事件的添加购物车按钮
  const addBtn = event.target.closest('.wc-block-components-add-to-cart-button');
  if (!addBtn) return;

  // 隐藏原按钮
  addBtn.style.display = 'none';
  // 找到后续元素并添加指定类
  const nextEl = addBtn.nextElementSibling;
  if (nextEl) {
    nextEl.classList.add('add_to_cart_button', 'wp-element-button');
  }
});

方案二：使用MutationObserver监听DOM变化 #

如果专属事件无法满足需求（比如需要更精细的状态检测），可以用MutationObserver观察按钮的类或文本变化，因为区块按钮在点击后会更新DOM状态：

document.addEventListener('DOMContentLoaded', function() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      // 遍历所有区块内的添加购物车按钮
      document.querySelectorAll('.wc-block-all-products .wc-block-components-add-to-cart-button').forEach(btn => {
        // 检测按钮是否已处于"添加完成"状态（类名或文本判断，根据实际情况调整）
        if (btn.classList.contains('added') || btn.textContent.includes('已添加')) {
          const parentContainer = btn.closest('.wc-block-components-product-add-to-cart');
          if (parentContainer) {
            btn.style.display = 'none';
            // 找到添加完成后的提示元素
            const successEl = parentContainer.querySelector('.wc-block-components-add-to-cart__added-message') || btn.nextElementSibling;
            if (successEl) {
              successEl.classList.add('add_to_cart_button', 'wp-element-button');
            }
          }
        }
      });
    });
  });

  // 监听所有商品卡片的DOM变化
  document.querySelectorAll('.wc-block-all-products .wc-block-grid__product').forEach(productCard => {
    observer.observe(productCard, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['class']
    });
  });
});

注意事项 #

• 确保代码在DOM完全加载后执行（比如放在DOMContentLoaded回调中，或者通过WordPress的wp_enqueue_script正确注册脚本，依赖wc-blocks）；
• 不同版本的WooCommerce Blocks可能会调整类名或事件名，建议根据浏览器开发者工具实际检查DOM结构和触发的事件。

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