当商品在WooCommerce的购物车中时，购物车按钮的新样式

New style of cart button when item is in cart in WooCommerce(当商品在WooCommerce的购物车中时，购物车按钮的新样式)

问题描述

如果商品已在购物车中，我使用代码更改该产品的"添加到购物车"按钮的文本。

/* 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;
 
}

告诉我，如果产品已添加到购物车中，您如何更改该产品的添加到购物车按钮的样式？

我尝试将代码添加到/loop/Add-to-cart.php文件，如下所示Change add to cart button style when product is in cart in Woocommerce，但对我无效。

是否有其他代码选项可以帮助解决我的问题？

我将很高兴得到您的帮助！

推荐答案

一种方法是通过jQuery检查某个元素(您的添加到购物车按钮)是否包含某个文本，如果是这样，我们将添加一个额外的类，您可以通过CSS设置样式。

:contains() Selector-选择包含指定文本的所有元素。

因此您得到：

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

注意：根据您使用的主题，选择器(类)的名称可能会有所不同

这篇关于当商品在WooCommerce的购物车中时，购物车按钮的新样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！