How to give a unique style to a fee on WooCommerce - css

Question

I created a custom fee on Woocommerce based on a user plan. I did something like this on my functions.php:
function my_discount_based_on_user_membership( $cart ) {
$discount = 10;
$cart->add_fee( "My Discount", -$discount );
}
add_action( 'woocommerce_cart_calculate_fees', 'my_discount_based_on_user_membership', 20, 1 );
Let's say that this fee has the value of -$10. I want that -$10 have another color, like red for example. Is there a way of set a CSS class for a custom fee in Woocommerce? How can I target this element?
Since I could have another discounts later, target the element position using JS or CSS probably is not a good idea. Any advice?

Answer 1

To give a unique style to a fee in WooCommerce
Use CSS
.fee bdi {
color: red;
}
OR
You could overwrite the cart/cart-totals.php template file
This template can be overridden copying it to yourtheme/woocommerce/cart/cart-totals.php.
Replace (line 61 #version 2.3.6)
<td data-title="<?php echo esc_attr( $fee->name ); ?>"><?php wc_cart_totals_fee_html( $fee ); ?></td>
With
<td style="color:red;" data-title="<?php echo esc_attr( $fee->name ); ?>"><?php wc_cart_totals_fee_html( $fee ); ?></td>
AND
the checkout/review-order.php file
This template can be overridden by copying it to yourtheme/woocommerce/checkout/review-order.php.
Replace (line 80 #version 5.2.0)
<td><?php wc_cart_totals_fee_html( $fee ); ?></td>
With
<td style="color:red;"><?php wc_cart_totals_fee_html( $fee ); ?></td>
Note: instead of using inline CSS,
when overwriting the template files. You can also add a custom class instead <td class="my-class"...