当产品在 Woocommerce 的购物车中时，更改添加到购物车按钮样式

Question

I have an icon (instead of text) in my add to cart button. I added in the add-to-cart.php file an icon class to the add-to-cart anchor, as you can see here:

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s fa fa-cart-plus">%s</a>' 

and I would like to change his color in case the item is already in cart.
I have a function to get an add-to-cart button without any text, and as well I get the items id that are in cart:

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +
function woo_archive_custom_cart_button_text() {

    global $woocommerce;

    foreach($woocommerce->cart->get_cart() as $cart_item_key => $values ) {
        $_product = $values['data'];

        if( get_the_ID() == $_product->id ) {
            return __('', 'woocommerce');   
         }
    }
    return __( '', 'woocommerce' );

which is great, but for some reason I can't think of a way to use this new information with changing the icon style. I've tried to 'echo' a new style, but I don't know how to relate to the product id in css (or in jquery). Any ideas?

---

*There might be a different way to do this. When an item is added to cart, the add-to-cart anchor has a new class- 'added', so I can easily customize it with css, and it works, but the 'added' class is there only when the item is being added. after refreshing the page it doesn't exist, therefore the customize I've done doesn't affect anymore.

Answer 1

You should need to make some changes in the template loop/add-to-cart.php directly has you have already done, replacing them by:

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

global $product;

// Your icon class is now here
$add_class = ' fa fa-cart-plus';

// Loop through cart items
foreach( WC()->cart->get_cart() as $cart_item )
    // If the product is in cart
    if( $product->get_id() == $cart_item['product_id'] ) {
        $add_class .= ' is-added'; // We add an additional class
        break;
    }

$add_to_cart_text = '';

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( isset( $quantity ) ? $quantity : 1 ),
        esc_attr( $product->get_id() ),
        esc_attr( $product->get_sku() ),
        esc_attr( isset( $class ) ? $class : 'button' ) . $add_class,
        $add_to_cart_text
    ),
$product );

This will add an additional is-added to your button, that you will be able to target with your CSS to make a color change. This is tested and works.

You will not need anymore your function woo_archive_custom_cart_button_text() …