如何在 WooCommerce 上为收费赋予独特的风格答案

【问题标题】：How to give a unique style to a fee on WooCommerce如何在 WooCommerce 上为收费赋予独特的风格
【发布时间】：2021-07-13 13:41:59
【问题描述】：

我根据用户计划在 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 类？如何定位这个元素？

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

【问题讨论】：

标签： css wordpress woocommerce fee

【解决方案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，覆盖模板文件时。你也可以添加一个自定义类来代替<td class="my-class"...

【讨论】：