Woocommerce中产品在购物车中时，更改添加到购物车按钮样式 [英] Change add to cart button style when product is in cart in Woocommerce

问题描述

我的添加到购物车按钮中有一个图标(而不是文字).我在add-to-cart.php文件中添加了一个图标类到add-to-cart锚点，如您在此处看到的:

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

，如果该商品已经在购物车中，我想更改他的颜色.
我有一个获取购物车按钮而没有任何文本的功能，并且我也获得了购物车中的商品ID:

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

很好，但是由于某种原因，我想不出一种通过更改图标样式来使用此新信息的方法.我试图呼应"一种新样式，但是我不知道如何与CSS(或jquery)中的产品ID相关联.有什么想法吗?

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?

*可能会有不同的方法来执行此操作.将商品添加到购物车时，添加到购物车的锚点有一个新的类添加"，因此我可以轻松地使用CSS对其进行自定义，并且可以使用，但是只有当商品被添加时，添加"类才存在被添加.刷新页面后，该页面不存在，因此我所做的自定义不再影响.

*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.

推荐答案

如果您已经完成操作，则应该直接在模板 loop/add-to-cart.php 中进行一些更改，替换为:

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

这将向您的按钮添加一个附加的已添加，您将可以使用CSS进行定位以进行颜色更改.这已经过测试并且可以正常工作.

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.

您将不再需要函数 woo_archive_custom_cart_button_text()…

这篇关于Woocommerce中产品在购物车中时，更改添加到购物车按钮样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！