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

Question

我的添加到购物车按钮中有一个图标（而不是文本）。我在 add-to-cart.php 文件中添加了一个图标 class 到 add-to-cart 锚点，正如你在这里看到的：

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：

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

这很好，但出于某种原因，我想不出一种方法来使用这些新信息来更改图标样式。我尝试 'echo' 一种新样式，但我不知道如何与 css（或 jquery）中的产品 ID 相关联。有什么想法吗？

*可能有不同的方法来做到这一点。当一个项目被添加到购物车时，添加到购物车的锚点有一个新的 class- 'added'，所以我可以很容易地用 css 自定义它并且它有效，但是 'added' class 仅在添加项目时存在。刷新页面后它不存在，因此我所做的自定义不再影响。

Answer 1

您应该需要直接在模板中进行一些更改 loop/add-to-cart.php 您已经完成了，将它们替换为：

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

这会向您的按钮添加一个额外的 is-added，您将能够使用 CSS 进行定位以更改颜色。这已经过测试并且有效。

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

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

Change add to cart button style when product is in cart in Woocommerce

php

wordpress

product

cart

woocommerce