How to give a unique style to a fee on WooCommerce

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?

7uc1f3r · Accepted Answer · 2021-07-14T09:36:30.050

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

How to give a unique style to a fee on WooCommerce

1 Answers1