WooCommerce付款方式添加文字或价格

Question

我正在寻找一种在付款方式上添加一些文字或价格的解决方案。每种付款方式都需要唯一的文本，如屏幕截图所示。有人知道如何通过functions.php实现此功能或如何添加它吗？

Answer 1

您必须通过从以下位置复制payment-method.php模板来覆盖它：

wp-content/plugins/woocommerce/templates/checkout/payment-method.php

访问您的孩子主题：

wp-content/themes/your-child-theme/woocommerce/checkout/payment-method.php

然后将自定义操作钩子添加到该模板中的<label>元素中，如下所示：

<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
    <?php do_action( 'wc_before_payment_method_label', $gateway->id ); ?>
    <?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?>
</label>

然后，您可以使用该wc_before_payment_method_label操作向每种付款方式的网关标签添加额外的<span>。

add_action( 'wc_before_payment_method_label' , 'add_payment_gateway_fee_label', 10, 1 );
function add_payment_gateway_fee_label( $id ) {

    $custom_label = array(
        'bacs'      => 1,
        'cheque'    => 1.5,
        'cod'       => 2,
        'paypal'    => 2.5,
    );

    echo array_key_exists( $id, $custom_label ) ? sprintf( '<span class="custom-gateway-label">%s</span>', wc_price( $custom_label[$id] ) ) : '';
}

然后，您可以将一些额外的CSS样式应用于子主题的style.css，以使其适合您的特定设置。我添加了一些快速的CSS样式，并将它们与Storefront结合使用，使其在桌面上看起来像这样：

CSS：

.custom-gateway-label {
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 10px;
    background: #ccc;
    float: right;
    font-size: 0.8em;
}