Question

如果商品已在购物车中，我会使用代码更改产品“添加到购物车”按钮的文本和样式。非常感谢 7uc1f3r。

/* for single product */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'single_product_button_text' );
 
function single_product_button_text( $text ) {
 
    if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) {
        $text = 'Product in cart';
    }
 
    return $text;
 
}
 
/* for archive/category pages */
add_filter( 'woocommerce_product_add_to_cart_text', 'products_button_text', 20, 2 );
 
function products_button_text( $text, $product ) {
 
    if( 
       $product->is_type( 'simple' )
       && $product->is_purchasable()
       && $product->is_in_stock()
       && WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) )
    ) {
 
        $text = 'Product in cart';
 
    }
 
    return $text;
 
}

function action_wp_footer() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            var selector = '.add_to_cart_text:contains("Product in cart")';
            
            // Selector contains specific text
            if ( $( selector ).length > 0 ) {
                $( selector ).addClass( 'product-is-added' );
            } else {
                $( selector ).removeClass( 'product-is-added' );            
            }
            
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'action_wp_footer' );

将产品添加到购物车后，我每次都必须刷新页面才能获得新的文本和按钮样式。

更新

我还使用了 Relabel "add to cart" button after add to cart in WooCommerce 2nd 函数代码来使用 AJAX 更改按钮的文本和样式。文本更改，但所有样式都中断。

很遗憾，在 echo '<div class="add_to_cart_text">' . $new_text . '</div>'; 行添加样式不起作用。

有什么帮助吗？

Answer 1

由于您的网站商店和档案页面非常自定义（没有默认的 WooCommerce html 结构），您需要为您的网站制作非常自定义的 jQuery 代码。

默认情况下，您的 Ajax 添加到购物车按钮具有此输出 html 示例：

<a href="?add-to-cart=1234" rel="nofollow" data-quantity="1" data-product_id="1234" class="add-to-cart-grid btn-link nasa-tip add_to_cart_button ajax_add_to_cart product_type_simple nasa-tiped" data-product_sku="AB123" data-tip="Add to Cart">
    <span class="add_to_cart_text">Add to Cart</span>
    <i class="cart-icon pe-7s-cart"></i>
</a>

并且您需要将 Ajax 添加到购物车以具有以下输出 html（示例）：

<a href="?add-to-cart=1234" rel="nofollow" data-quantity="1" data-product_id="1234" class="add-to-cart-grid btn-link nasa-tip add_to_cart_button ajax_add_to_cart product_type_simple nasa-tiped" data-product_sku="AB123" data-tip="Product in cart">
    <span class="add_to_cart_text product-is-added">Product in cart</span>
    <i class="cart-icon pe-7s-cart"></i>
</a>

所以知道我们可以管理商店和存档页面上的自定义 Ajax 添加到购物车按钮所需的 jQuery 代码......

请尝试以下操作，以更改 added_to_cart WooCommerce jQuery 事件中自定义 Ajax 添加到购物车按钮上的文本：

add_action( 'wp_footer', 'ajax_button_text_js_script' );
function ajax_button_text_js_script() {
    $text = __('Product in cart', 'woocommerce');
    ?>
    <script>
        jQuery(function($) {
            var text = '<?php echo $text; ?>',      $this;

            $(document.body).on('click', '.ajax_add_to_cart', function(event){
                $this = $(this); // Get button jQuery Object and set it in a variable
            });

            $(document.body).on('added_to_cart', function(event,b,data){
                var buttonText = '<span class="add_to_cart_text product-is-added">'+text+'</span><i class="cart-icon pe-7s-cart"></i>';

                // Change inner button html (with text) and Change "data-tip" attribute value
                $this.html(buttonText).attr('data-tip',text);
            });
        });
    </script>
    <?php
}

代码位于活动子主题（或活动主题）的functions.php 文件中。经测试有效。

Answer 2

我在网站上实现了类似的功能。

可能有帮助的是

.on('input change', function() { // Your code here }).change();

这实时更新了我的产品页面，我相信您应该能够找到一种方法来实现它来更改添加到购物车按钮上的文本。

我是 JavaScript 新手，所以请耐心等待，我希望我的回答至少有一点帮助。

在 WooCommerce 中添加到购物车后更改自定义 Ajax 添加到购物车按钮文本

2 个答案: