添加 CSS class(es) 到具有（或基于）产品类别的 WooCommerce 购物车项目

Question

我正在尝试将 WooCommerce 产品 class 添加到购物车页面上的购物车商品中。

我有特定类别的产品可以更快地发货 (quickship)，我想在购物车页面上突出显示这些产品，让我的客户在结帐前了解它。

我尝试添加

wc_product_cat_class( '', $category );

和

wc_product_class( '', $product );

在 cart.php 模板文件中。也没有真正做到我所希望的。对其他解决方案有什么建议或选择吗？

Answer 1

不需要overwrite/modify 模板文件。您可以使用 woocommerce_cart_item_class 挂钩和 has_term()

table 行 (<tr>) 将包含额外的 class，具体取决于产品类别

所以你得到：

function filter_woocommerce_cart_item_class( $string, $cart_item, $cart_item_key ) {
    // Specific categories: the term name/term_id/slug. Several could be added, separated by a comma
    $categories_1 = array( 63, 15, 'categorie-1' );
    $categories_2 = array( 'categorie-2' );
    
    // Has term (product category)
    if ( has_term( $categories_1, 'product_cat', $cart_item['product_id'] ) ) {
        $string = 'my-class';
    } elseif ( has_term( $categories_2, 'product_cat', $cart_item['product_id'] ) ) {
        $string = 'another-class';
    }

    return $string;
}
add_filter( 'woocommerce_cart_item_class', 'filter_woocommerce_cart_item_class', 10, 3 );

OR 将术语 slugs 添加为 CSS class(es)，因此您不必通过 if 条件指定它:

function filter_woocommerce_cart_item_class( $string, $cart_item, $cart_item_key ) {
    // Get the product categories slugs for this item
    $term_slugs = wp_get_post_terms( $cart_item['product_id'], 'product_cat', array( 'fields' => 'slugs' ) );

    // NOT empty
    if ( ! empty ( $term_slugs ) ) {
        $string = implode( ' ', $term_slugs );
    }

    return $string;
}
add_filter( 'woocommerce_cart_item_class', 'filter_woocommerce_cart_item_class', 10, 3 );

添加 CSS class(es) 到具有（或基于）产品类别的 WooCommerce 购物车项目

Add CSS class(es) to WooCommerce cart items with (or based on) product categories

wordpress

woocommerce

product

cart