如何为 WooCommerce 上的费用赋予独特的风格

Question

我根据用户计划在 Woocommerce 上创建了自定义费用。我在 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 );

假设这笔费用的值为 -$10。我希望 -$10 有另一种颜色，例如红色。有没有办法在 Woocommerce 中为自定义费用设置 CSS class？我如何定位此元素？

因为我以后可以再打折，所以使用JS或CSS定位元素位置可能不是一个好主意。有什么建议吗？

Answer 1

为 WooCommerce 中的费用赋予独特的风格

使用CSS

.fee bdi {
    color: red;
}

或

您可以覆盖 cart/cart-totals.php 模板文件

可以覆盖此模板，将其复制到 yourtheme/woocommerce/cart/cart-totals.php.

替换（第 61 行@version 2.3.6）

<td data-title="<?php echo esc_attr( $fee->name ); ?>"><?php wc_cart_totals_fee_html( $fee ); ?></td>

有

<td style="color:red;" data-title="<?php echo esc_attr( $fee->name ); ?>"><?php wc_cart_totals_fee_html( $fee ); ?></td>

和

checkout/review-order.php 文件

可以通过将其复制到 yourtheme/woocommerce/checkout/review-order.php.

替换（第 80 行 @version 5.2.0）

<td><?php wc_cart_totals_fee_html( $fee ); ?></td>

有

<td style="color:red;"><?php wc_cart_totals_fee_html( $fee ); ?></td>

注意： 而不是使用内联 CSS，覆盖模板文件时。您还可以添加自定义 class 而不是 <td class="my-class"...

如何为 WooCommerce 上的费用赋予独特的风格

How to give a unique style to a fee on WooCommerce

css

wordpress

woocommerce

fee