如何更改 Woocommerce 阻止按钮的“购物车”文本？

Question

Woocommerce AddToCart 按钮的默认行为是首先显示“添加到购物车”。一旦点击，它将进入加载状态并检查ajax请求，然后显示“in cart {number}”。

我找不到任何可以挂钩的操作/过滤器。我可以通过多种不同的方式更改“添加到购物车”文本：挂钩、翻译、CSS 等。但对于后一种状态，JavaScript 负责，因此，甚至翻译也不起作用。

虽然我非常喜欢这个功能，但我必须找到一种方法用图标替换“购物车”，同时保留 {number} 部分。

如果您有稳健且干净的方法来执行此操作，请告诉我。

提前谢谢您。

我尝试重现 html 的结构，甚至是 wp-data 属性，但我无法走得太远，因为在用默认的 woocommerce html 替换它之后，交互性消失了。

我不太擅长Javascript，但尽管看起来很丑陋，我什至尝试用一个脚本来更改它，该脚本查找addedtocart 事件并更改文本。徒劳无功...

最明显的方法是从头开始创建一个自定义按钮，但我现在无法做到这一点，因为我还有其他要求要交付。

我也尝试了 Chatgpt 所提供的丰富知识，但没有成功。

Answer 1

您可以编写自定义 JavaScript 来执行此操作 当按钮文本更改为“in cart {number}”时，将文本“in cart”动态替换为您所需的图标（例如，使用 HTML 或 FontAwesome 图标）。

您可以在主题的custom.js或function.php脚本文件中编写javascript代码

这是简单的 .js 代码，您可以将其粘贴到主题中的 custom.js 中

document.addEventListener('DOMContentLoaded', function () {
    // Listen for changes in WooCommerce block buttons
    const observer = new MutationObserver(function (mutationsList) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                const target = mutation.target;
                // Check if the button text contains "in cart"
                if (target.innerText.includes('in cart')) {
                    const match = target.innerText.match(/(\d+)/); // Extract the number
                    if (match) {
                        const number = match[1];
                        // Replace button content with custom icon and number
                        target.innerHTML = `<span style="display: inline-flex; align-items: center;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-check" viewBox="0 0 16 16">
                              <path d="M10.97 4.97a.235.235 0 0 0-.304.304l1.28 3.211a.25.25 0 0 0 .233.176h2.54a.25.25 0 0 0 .234-.176l1.28-3.211a.235.235 0 0 0-.305-.304l-3.213 1.28a.235.235 0 0 0-.176.233v2.54a.235.235 0 0 0 .176.234l3.213 1.28a.235.235 0 0 0 .305-.305l-1.28-3.213a.25.25 0 0 0-.233-.176h-2.54a.25.25 0 0 0-.234.176l-1.28 3.213a.235.235 0 0 0 .305.305l3.213-1.28a.235.235 0 0 0 .176-.233v-2.54a.235.235 0 0 0-.176-.234l-3.213-1.28z"/>
                              <path d="M5.5 1a1.5 1.5 0 0 1 1.415 1H13a.5.5 0 0 1 .485.621l-1 4a.5.5 0 0 1-.485.379H5.415a1.5 1.5 0 0 1-1.415 1A1.5 1.5 0 0 1 3 7.5V2.5A1.5 1.5 0 0 1 4.5 1zm0 1A.5.5 0 0 0 5 2.5v5a.5.5 0 0 0 0 1h7.565a.5.5 0 0 0 .485-.621l-1-4a.5.5 0 0 0-.485-.379H5z"/>
                            </svg>
                            &nbsp; ${number}
                        </span>`;
                    }
                }
            }
        }
    });

    // Target WooCommerce Add to Cart Buttons
    const buttons = document.querySelectorAll('.wp-block-button__link'); // Adjust selector if needed
    buttons.forEach(button => {
        observer.observe(button, { childList: true, subtree: true });
    });
});

function custom_add_to_cart_button_script() {
    wp_enqueue_script('custom-add-to-cart', get_template_directory_uri() . '/js/custom.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'custom_add_to_cart_button_script');



add_action('wp_footer', function () {
    ?>
    <script>
    /* Paste the JavaScript code here */
    </script>
    <?php
});

这里介绍了如何将 .js 函数添加到您的网站