如何修改WooCommerce加入购物车按钮的“in cart”文本为图标并保留数量计数？

嘿，我完全懂你这会儿的头疼——WooCommerce这个加购按钮的状态文本藏得确实有点刁钻，默认的钩子基本只管初始的「Add to Cart」，点击后的状态全靠JS控制，连翻译都不好使对吧？我之前也碰到过一模一样的需求，给你两个靠谱的方案，不用重新做按钮，还能保住原有交互逻辑：

方案1：监听WooCommerce原生事件，动态替换内容 #

这个方法跟着WooCommerce的原生逻辑走，不会破坏按钮的加购交互，可靠性很高。核心是监听added_to_cart事件（这是WooCommerce成功添加商品后触发的官方事件），然后修改按钮的内容：

document.addEventListener('DOMContentLoaded', function() {
    // 监听商品成功加入购物车的事件
    document.body.addEventListener('added_to_cart', function(event) {
        const addToCartBtn = event.detail.target;
        if (!addToCartBtn) return;

        // 稍微延迟一下，确保WooCommerce已经更新了按钮文本
        setTimeout(() => {
            // 提取按钮里的数量数字
            const cartCountMatch = addToCartBtn.textContent.match(/\d+/);
            if (!cartCountMatch) return;
            
            const cartCount = cartCountMatch[0];
            // 替换成图标+数量，这里用Font Awesome图标举例，换成你自己的图标即可
            addToCartBtn.innerHTML = `<i class="fas fa-shopping-cart"></i> ${cartCount}`;
        }, 100);
    });
});

补充优化：用MutationObserver精准监听文本变化 #

如果觉得setTimeout不够稳妥，可以用MutationObserver实时监测按钮的文本变化，一旦检测到「in cart」就替换：

document.addEventListener('DOMContentLoaded', function() {
    // 给所有加购按钮添加监听
    document.querySelectorAll('.add_to_cart_button').forEach(btn => {
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                const btnText = btn.textContent.trim();
                const countMatch = btnText.match(/\d+/);
                
                // 检测到目标文本就替换
                if (countMatch && btnText.includes('in cart')) {
                    btn.innerHTML = `<i class="fas fa-shopping-cart"></i> ${countMatch[0]}`;
                    // 替换完成后断开监听，避免重复触发
                    observer.disconnect();
                }
            });
        });
        
        // 监听按钮的文本和子元素变化
        observer.observe(btn, { childList: true, characterData: true, subtree: true });
    });
});

方案2：纯CSS实现（更简单，适合不需要复杂JS的场景） #

如果你的项目不需要复杂的JS逻辑，纯CSS就能搞定——核心是利用按钮加入购物车后的状态类（比如WooCommerce默认的added类），隐藏「in cart」文字，用伪元素插入图标，同时保留数量：

/* 针对加入购物车后的按钮状态 */
.add_to_cart_button.added {
    position: relative;
    /* 给图标预留位置 */
    padding-left: 28px;
}

/* 插入购物车图标（这里用SVG举例，换成你自己的图标资源） */
.add_to_cart_button.added::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"/></svg>') no-repeat center center;
    background-size: contain;
}

/* 隐藏「in cart」文字，只保留数量 */
.add_to_cart_button.added {
    /* 把文字缩进，只露出数量 */
    text-indent: -20px;
    overflow: visible;
}

注意事项 #

1. 按钮类名适配：不同主题的加购按钮类名可能不同，比如产品列表页的按钮可能是.product_type_simple.add_to_cart_button，单个产品页的是.single_add_to_cart_button，可以用浏览器开发者工具查看实际类名。
2. 图标资源：如果用Font Awesome，确保项目已经引入了它的CSS；如果用自定义SVG，直接把SVG代码转义后放进background里即可。
3. 兼容性：MutationObserver和CSS伪元素在现代浏览器都支持，不用担心兼容问题。

这两个方案都不需要你重新构建按钮，完美保留WooCommerce原有的加购、加载状态等交互逻辑，你可以根据自己的项目情况选一个试试~

备注：内容来源于stack exchange，提问作者ordett