在WooCommerce中添加到购物车后，更改自定义Ajax的“添加到购物车"按钮文本 [英] Change custom Ajax Add to Cart button text after add to cart in WooCommerce

问题描述

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

I use a code that changes the text and style of the "Add to Cart" button for a product if the item is already in the cart. Many thanks to 7uc1f3r for this.

/* 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' );

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

After adding a product to the cart, I have to refresh the page each time to get new text and button style.

更新

我还使用了

I also used Relabel "add to cart" button after add to cart in WooCommerce 2nd function code to change the text and style of the button using AJAX. The text changes, but all styles break.

不幸的是，在 echo'< div class =" add_to_cart_text">''上添加了样式.$ new_text.'</div>'; 行不起作用.

Unfortunately, adding styles on the echo '<div class="add_to_cart_text">' . $new_text . '</div>'; line doesn't work.

有帮助吗?

推荐答案

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

As your website shop and archives pages are very custom (doesn't have the default WooCommerce html structure) you need a very custom jQuery code made for your website.

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

Your Ajax add to cart button has by default this output html example:

<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(示例):

And you need on Ajax added to cart to have the following output html (example):

<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代码...

So know we can manage the jQuery code that is needed for your custom Ajax add to cart buttons on shop and archive pages…

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

Try the following that will change the text on your custom Ajax add to cart button on added_to_cart WooCommerce jQuery event:

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文件中.经过测试，可以正常工作.

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

这篇关于在WooCommerce中添加到购物车后，更改自定义Ajax的“添加到购物车"按钮文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！